인라인 CSS에서 호버를 작성하는 방법은 무엇입니까?

1016

인라인 CSS 코드를 작성 해야하는 경우가 있으며 앵커에 호버 스타일을 적용하고 싶습니다.

a:hoverHTML 스타일 속성 내에서 인라인 CSS에서 어떻게 사용할 수 있습니까?

예를 들어 HTML 이메일에서 CSS 클래스를 안정적으로 사용할 수 없습니다.

html  css  inline-styles 
— 암 엘거
소스
24
블로깅 애플리케이션에 HTML을 임베드하려면 종종 인라인 스타일 만 사용해야합니다. 특히 타사 클라이언트를 통해 HTML을 임베드하고 사용자 테마에 액세스 할 수없는 경우.
— 프로비던스
8
이에 대한 제안 된 CSS 표준이 있습니다. 어떤 종류의 브라우저를 지원하는지 모릅니다 (힌트 : -moz 등의 사용자 정의 태그를 사용할 수 있음) : w3.org/TR/2002/WD-css-style-attr-20020515
— Kato
1
— Synetech
17
오 어서. 때로는 랜딩 페이지 프로토 타입을 제작할 때 스타일 시트를 포크하거나 새 템플릿 브랜치를 만들거나 녹색 버튼이 더 잘 작동하는지 테스트 할 필요가 없습니다. esh.
— ElBel
1
@FriendlyNeighborhoodIdiot이 페이지는 13 살입니다.
— Tofandel

답변:

574

짧은 대답 : 당신은 할 수 없습니다.

긴 대답 :하지 말아야합니다.

클래스 이름 또는 ID를 지정하고 스타일 시트를 사용하여 스타일을 적용하십시오.

:hover의사 선택기이며 CSS의 경우 스타일 시트 내에서만 의미가 있습니다. 선택 기준을 정의하지 않으므로 인라인 스타일에 해당하는 항목이 없습니다.

OP의 의견에 대한 답변 :

CSS 규칙을 동적으로 추가하는 데 유용한 스크립트 는 Javascript 를 사용하여 CSS를 전적으로 소유하기를 참조하십시오 . 주제에 대한 일부 이론에 대해서는 스타일 시트 변경을 참조 하십시오 .

또한 옵션 인 경우 외부 스타일 시트에 링크를 추가 할 수 있습니다. 예를 들어

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

주의 : 위는 헤드 섹션 이 있다고 가정합니다 .

— 조나단 핑 랜드
소스
4
자바 스크립트로 CSS 클래스를 추가 할 수 있습니다.
— Jonathan Fingland 2016 년
203
HTML 이메일과 같이 인라인 CSS가 유일한 옵션 인 다른 환경이 있습니다 (예 : 인라인이 아닌 경우 Gmail은 CSS를 무시합니다). 불행히도 대부분의 이메일 클라이언트에서 Javascript가 제거 되어도 : hover 효과를 추가하는 방법을 아직 찾지 못했습니다.
— Simon East
24
@Kato는 훌륭한 링크이지만 실제로 작동하기를 바랍니다. 슬프게도 그렇지 않습니다. 확인하기 위해 구문을 사용하여 테스트 style="{color:green;} :hover { color: red; }"했으며 firefox는 링크를 녹색으로 표시했지만 호버를 무시했습니다. 크롬은 둘 다 무시했습니다. 지속적인 테스트는 의미가 없습니다.
— Jonathan Fingland
9
나는 그것을 해결책으로 언급하지 않았다. 필자는 인라인에 해당하는 것이없고 의사 선택기가 스타일 시트 외부에 의미가 없다고 말하는 것이 "완전히"정확하지 않다고 언급했다. 어떻게 부적절합니까?
— Kato
5
왜 긴 대답은 당신은하지 말아야 ... 당신은 ... 당신은 일반화해서는 안됩니다. html로 전자 메일 메시지를 보내려고했지만 gmail은 모든 스타일 태그, 모든 외부 스타일 참조 및 모든 스크립트를 제거합니다. 그렇다면 ... gmail로 전송 된 이메일 내부의 링크 색상을 가리킬 수있는 방법이 있습니까? 희망은 ... 희망은 죽을 마지막입니다 !!! =)
— Miguel Angelo
434

onMouseOverand onMouseOut매개 변수 에서 JavaScript를 사용하여 스타일을 변경하면 동일한 효과를 얻을 수 있지만 둘 이상의 요소를 변경해야하는 경우에는 매우 비효율적입니다.

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>
스 니펫 확장

또한 this이 맥락에서 작동 하는지 확실하지 않습니다 . 로 전환해야 할 수도 있습니다 document.getElementById('idForLink').

— 알렉스 S
소스
12
똑똑하다! 배경 색상 호버 효과에도 적용<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
— mxro
46
이것을 '영리한'것으로 여겨지는 것에 웃음을 가져야합니다. 또는 더 나쁜 것은 '이미지'가 있고 '호버'효과를주기 위해 이미지를 교체해야한다는 것입니다. 내가 늙었다 고 느끼게한다! 그러나 그것은 OP의 질문에 대답한다고 충분합니다. :)
— Manachi
5
나는 이것에 대해 Manachi와 동의해야한다. 이것은 90 년대 지오 시티 자바 스크립트의 역화와 같다; P
— Eric Castro
9
오래된, 새로운, 고대 또는 앞으로. 그것은 질문에 대답하고 나를 도왔습니다. @peter 감사합니다.
— user2060451
4
나는 이메일을 위해 이것을해야했고 효과가있었습니다. 감사합니다! 이것은 실제로 받아 들여진 대답과 달리 질문을 해결합니다.
— theUtherSide
53

과거 어느 시점에서 그것을 할 수 있습니다 . 그러나 지금 (동일한 표준의 최신 개정판, 후보 추천서에 따르면) 할 수 없습니다.

— 푸딘
소스
3
다른 모든 답변은 가능하지 않다고 말했지만 귀하의 답변은 가능하다는 것을 보여 주므로 답변이 다릅니다.
— Amr Elgarhy
2
죄송합니다. 기사 날짜를 확인했습니다. 10 살입니다. 따라서 작동한다고 보장 할 수 없습니다. 그렇다면, 저에게도 알려주십시오.
— fuddin
2
나는 이것을 시험했다 : <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> 그러나 그것은 작동하지 않았다
— Amr Elgarhy
5
— 누군가이
9
더 정확하게 말하면, 과거 어느 시점에서 그것을 할 수 있습니다. 그러나 지금 (동일한 표준의 최신 개정판, 후보 추천서에 따르면) 할 수 없습니다 .
— Ilya Streltsyn
34

나는 이것에 공헌하는 것이 늦었지만 아무도 이것을 제안하지 않는 것이 슬 sad 다. 실제로 인라인 코드가 필요하다면 이것이 가능하다. 호버 버튼에 필요했습니다. 방법은 다음과 같습니다.

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a
스 니펫 확장

이 경우 인라인 코드 : "background-color : red;" 호버의 스위치 색상이며 필요한 색상을 넣은 다음이 솔루션이 작동합니다. 호환성 측면에서 이것이 완벽한 솔루션이 아닐 수도 있지만 절대적으로 필요한 경우 작동합니다.

— lukesrw
소스
4
감사합니다. 좋은 답변입니다.이 답변은 해결책이어야합니다.
— Hovhannes Sargsyan
63
아니요, OP는 HTML 스타일 속성 내에서 인라인 CSS로 원한다고 말했습니다 .
— jj_
3
jj_- 그러나이 방법을 사용하면 CSS에 몇 줄만 넣고 CSS를 여러 곳에서 반복해서 사용할 수 있습니다. 나 자신을 포함하여 많은 사람들이 이것이 유용한 대안이라고 생각했습니다.
— lukesrw 2
2
이것은 약간의 수정과 함께 실제 대답이어야합니다. 스타일에 색상을 설정하지 말고 마우스를 가져 가면 부모로부터 상속되는 규칙 만 인라인으로 설정하십시오.
— Hayko Koryun
4
이것은 단지 "정상적인"방법이며 모든 사람이 올바른 방법이라고합니다. 그러나 인라인 방식이 아니므로 OP 원래 요청이었습니다.
— wcndave
31

a:hoverCSS 규칙이 아닌 선택기의 일부 이므로 설명하는 내용을 정확하게 수행 할 수 없습니다 . 스타일 시트에는 두 가지 구성 요소가 있습니다.

selector {rules}

인라인 스타일에는 규칙 만 있습니다. 선택기는 현재 요소로 내재되어 있습니다.

선택기는 XML과 같은 문서의 요소를 일치시키는 일련의 기준을 설명하는 표현 언어입니다.

그러나 style세트는 기술적으로 거의 모든 곳으로 갈 수 있기 때문에 가까이 갈 수 있습니다.

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
— 렉스 M
소스
3
실제로는 할 수 없습니다. "HTML은 문서의 HEAD 섹션에 여러 개의 STYLE 요소를 허용합니다." ( w3.org/TR/html4/present/styles.html#edef-STYLE )
— 에릭 아라 우호
2
내 컴퓨터에서 작동합니다. 감사!
— Josh Habdas
@ ÉricAraujo : 그런 다음이 모든 내용을 <html> </html>태그로 감싸십시오
— fuddin
30

자바 스크립트를 사용하여 :

a) 인라인 스타일 추가 

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) 또는 조금 더 어려운 방법- "마우스 오버"추가

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

참고 : font-sizeJavascript의 다중 단어 스타일 (예 :)은 함께 작성됩니다 .

element.style.fontSize="12px"

— 토 두아
소스
3
이 답변은 수정되었으므로 이제 원래 질문과는 전혀 관련이없는 것 같습니다.
— Bill
1
와우, 그것은 상자 밖에서 생각하고 있습니다 ... 나는 그것을 좋아합니다!
— theglossy1
14

이것은 최고의 코드 예입니다.

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>
스 니펫 확장

사회자 제안 : 우려를 분리하십시오.

HTML 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>
스 니펫 확장

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}
스 니펫 확장

— 사용자 1476842
소스
10

인라인 의사 클래스 선언은 현재 CSS 반복에서 지원되지 않습니다 (그러나 내가 이해하는 바에 따르면 향후 버전에서 제공 될 수 있음).

지금은 가장 좋은 방법은 스타일을 지정할 링크 바로 위에 스타일 블록을 정의하는 것입니다.

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
— 잉크
소스
4
그 아이디어는 다행스럽게도 사라질 것입니다. ( "Abandoned Working Drafts"아래의 lists.w3.org/Archives/Public/www-style/2009Jun/0341.html 참조 )
— Ms2ger 2016 년
3
이있다 . 이 답변에서 누락되었습니다.
— Joel
9

지적했듯이 호버에 임의의 인라인 스타일을 설정할 수는 없지만 적절한 태그에서 다음을 사용하여 CSS 에서 호버 커서의 스타일을 변경할 수 있습니다 .

style="cursor: pointer;"
— 루터 포드
소스
2
가장 좋은 해답이 될 것을
— 블라디슬라프 Guleaev
6 
<style>a:hover { }</style>
<a href="/">Go Home</a>

호버는 의사 클래스이므로 스타일 속성으로 적용 할 수 없습니다. 선택기의 일부입니다.

— 조엘
소스
2
@Derek이 여전히 관심있는 경우 / 다른 사람이 읽는 경우 : "~ /"(물결 슬래시)는 asp.net 웹 응용 프로그램의 응용 프로그램 루트에 대한 서버 쪽 참조입니다. (응용 프로그램 루트는 물론 하위 폴더 일 수 있습니다). 여기에서 사용하는 것이 정확하지 않았으므로 질문을 한 후 답변이 편집 된 이유 (의심).
— Chris
5

당신은 이것을 할 수 있습니다. 그러나 인라인 스타일이 아닙니다. 사용 onmouseover및 onmouseout이벤트 :

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>
스 니펫 확장

4

귀하의 의견에 따르면, 당신은 어쨌든 JavaScript 파일을 보내고 있습니다. JavaScript로 롤오버를 수행하십시오. jQuery 의 $.hover()메소드는 다른 모든 JavaScript 래퍼와 마찬가지로 쉽게 만듭니다. 간단한 JavaScript에서도 그렇게 어렵지 않습니다.

— 비넬 샤
소스
이것은 해결 방법이지만 인라인 호버를 쓸 수 없다면 나에게 가장 좋은 답변과 최고의 답변으로
— 보입니다.
4

이를 수행 할 방법이 없습니다. 옵션은 JavaScript 또는 CSS 블록을 사용하는 것입니다.

독점 스타일 속성을 스타일 블록으로 변환하는 JavaScript 라이브러리가있을 수 있습니다. 그러나 코드는 표준을 준수하지 않습니다.

— m_vitaly
소스
2

방금 다른 해결책을 찾았습니다.

내 문제 : 바닥 글의 태그 <a>뿐만 아니라 일부 슬라이드 / 기본 컨텐츠 뷰어 주위에 <a>태그가 있습니다. IE에서 동일한 위치로 이동하기를 원하므로 onHover링크가 아닌 경우에도 전체 단락에 밑줄 이 표시됩니다. 전체 슬라이드는 링크입니다. IE는 그 차이를 모른다. 또한 바닥 글에 밑줄과 색 변경이 필요한 실제 링크가 있습니다 onHover. 색상을 변경하려면 바닥 글 태그와 함께 스타일을 인라인해야한다고 생각했지만 위의 조언은 이것이 불가능하다는 것을 암시합니다.

해결책 : 바닥 글 링크에 두 개의 다른 클래스를 주었고 내 문제가 해결되었습니다. 내가 가질 수 있었다 onHover, 하나 개의 클래스에서 색상 변경을 슬라이드가 onHover여전히 같은 시간에 바닥 글에 외부하는 HREF 및 슬라이드를 가질 수없는 색상 변경 / 밑줄이없는, 그리고!

— 리즈
소스
1

나는 shadow에 동의한다 . onmouseoverand onmouseout이벤트를 사용하여 JavaScript를 통해 CSS 를 변경할 수 있습니다 .

사람들이 JavaScript를 활성화해야한다고 말하지 마십시오. 스타일 문제 일 뿐이므로 JavaScript가없는 방문자가 있는지는 중요하지 않습니다.;) 대부분의 Web 2.0 은 JavaScript로 작동합니다. Facebook (예 : JavaScript) 또는 Myspace를 참조하십시오 .

— 제이슨
소스
0

이 게임은 꽤 늦었지만 HTML 이메일에서 언제 JavaScript를 사용 하시겠습니까? 예를 들어, 현재 근무중인 회사 (Abodee와 함께 운임)에서 대부분의 이메일 마케팅 캠페인에 가장 낮은 공통 분모를 사용합니다. JavaScript는 사용되지 않습니다. 이제까지. 어떤 종류의 전처리를 언급하지 않는 한.

관련 게시물에서 언급했듯이 "Lotus Notes, Mozilla Thunderbird, Outlook Express 및 Windows Live Mail은 모두 일종의 JavaScript 실행을 지원하는 것 같습니다.

이 기사를 작성한 기사 링크 : [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

또한 호버링은 어떻게 모바일 장치로 변환됩니까? 그래서 위의 답변을 좋아합니다.Long answer: you shouldn't.

이 주제에 대해 더 많은 통찰력을 가진 사람이 있으면 언제든지 정정하십시오. 감사합니다.

— 숀 스펜서
소스
0

그래서 이것은 사용자가 찾고 있던 것이 아니지만이 질문에 대한 답을 찾고 뭔가 관련이 있다고 생각했습니다. 나는 그 안에 탭을위한 새로운 색상 / 호버가 필요한 많은 반복 요소를 가지고있었습니다. 내 솔루션의 핵심 인 핸들 바를 사용하지만 다른 템플릿 언어도 작동 할 수 있습니다.

몇 가지 색상을 정의하고 각 요소의 핸들 막대 템플릿으로 전달했습니다. 템플릿 상단에 스타일 태그를 정의하고 사용자 정의 클래스와 호버 색상을 넣었습니다.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

그런 다음 템플릿에서 스타일을 사용했습니다.

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

당신은 필요하지 않을 수 있습니다 !important

— 웹 하운드
소스
0

다양한 유형의 코드를 작성할 수 있습니다

먼저 이것을 쓸 수 있습니다

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

CSS

.one{
  text-decoration: none;
}

다른 방법으로 시도해 볼 수 있습니다

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

CSS

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

jquery에서 호버를 시도 할 수도 있습니다

자바 스크립트

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

이 코드에는 jquery에 세 가지 함수가 있습니다. 먼저 jquery의 기본 기능인 함수를 준비한 다음 두 번째로 텍스트에 포인터를 가져 가면 색상이 변경되고 다음에이 함수에 호버 함수가 있습니다. 텍스트에 대한 포인터를 놓으면 색상이 달라지고 세 번째 함수입니다.

— 시라 흐 아메드
소스
중복 답변을 게시하지 마십시오
— Simas Joneliunas
ok 선생님 simas-joneliunas
— Siraj Ahmed
이러한 접근 방식 중 어느 것도 질문에 표현 된 문제를 해결하지 못합니다. HTML 형식의 전자 메일에서 JS를 전혀 사용할 수 없으며 제안하는 다른 방법은 명시 적으로 배제 된 클래스를 사용하는 것입니다.
— Quentin
-1

나는 자바 스크립트를 피해야했지만 서버 측 코드와 함께 갈 수 있습니다.

그래서 ID를 생성하고, 스타일 블록을 만들고, 해당 ID와의 링크를 생성했습니다. 예, 유효한 HTML입니다.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>
스 니펫 확장

— 바나나 산
소스
-2

유사 클래스 a:hover는 외부 스타일 시트에서만 사용할 수 있습니다 . 따라서 외부 스타일 시트를 사용하는 것이 좋습니다. 코드는 다음과 같습니다

a:hover {color:#FF00FF;}   /* Mouse-over link */
— 사용자 1466310
소스
반드시 외부 시트가 필요하지 않습니다 style. 태그 만 사용하십시오 .
— Dmitri Zaitsev
-2

클래스를 추가하여 인라인으로 만들 수는 없습니다.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 줄이지 만 어디서나 수업을 재사용 할 수 있습니다.

— 곤충
소스
-3

내 문제는 호버에서 다른 이미지로 교체 해야하는 많은 이미지 아이콘을 사용하는 웹 사이트를 구축하는 것입니다 (예 : 파란 이미지는 호버에서 적색으로 변합니다). 이를 위해 다음과 같은 솔루션을 제작했습니다.

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

한 쌍의 이미지가 들어있는 컨테이너를 소개했습니다. 첫 번째는 표시되고 다른 하나는 숨겨집니다 (display : none). 컨테이너를 가리키면 첫 번째 컨테이너가 숨겨지고 (display : none) 두 번째 컨테이너가 다시 표시됩니다 (display : block).

— 조켐 게 우스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.