인라인 CSS에서 a : hover를 작성하는 방법은 무엇입니까?
인라인 CSS 코드를 작성해야하는 경우가 있는데 앵커에 호버 스타일을 적용하고 싶습니다.
a:hoverHTML 스타일 속성 내에서 인라인 CSS를 어떻게 사용할 수 있습니까?
예를 들어 HTML 이메일에서 CSS 클래스를 안정적으로 사용할 수 없습니다.
짧은 대답 : 할 수 없습니다.
긴 대답 :해서는 안됩니다.
클래스 이름 또는 ID를 제공하고 스타일 시트를 사용하여 스타일을 적용하십시오.
:hover은 의사 선택자이며 CSS의 경우 스타일 시트 내에서만 의미가 있습니다. 인라인 스타일에 해당하는 것은 없습니다 (선택 기준을 정의하지 않기 때문에).
OP의 의견에 대한 응답 :
CSS 규칙을 동적으로 추가하는 방법에 대한 좋은 스크립트는 Totally Pwn CSS with Javascript 를 참조하십시오 . 또한 주제에 대한 일부 이론에 대해서는 스타일 시트 변경을 참조 하십시오 .
또한 옵션 인 경우 외부 스타일 시트에 대한 링크를 추가 할 수 있습니다. 예를 들면
<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>
주의 : 위의 내용은 헤드 섹션 이 있다고 가정합니다 .
둘 이상의 요소를 변경해야하는 경우 매우 비효율적이지만 onMouseOver및 onMouseOut매개 변수 에서 JavaScript로 스타일을 변경하여 동일한 효과를 얻을 수 있습니다 .
<a href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'" >Text</a>또한 this이 맥락에서 작동 하는지 확실히 기억할 수 없습니다 . 로 전환해야 할 수도 있습니다 document.getElementById('idForLink').
과거 어느 시점에서 할 수 있습니다 . 그러나 지금은 (Candidate Recommendation 인 동일한 표준의 최신 개정판에 따르면) 할 수 없습니다.
나는 이것에 매우 늦게 기여하고 있지만 아무도 이것을 제안하지 않은 것을 보았을 때 슬펐다. 실제로 인라인 코드가 필요하다면 이것이 가능하다. 일부 호버 버튼에 필요했습니다. 방법은 다음과 같습니다.
.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;" 마우스 오버의 스위치 색상이고 필요한 색상을 거기에 넣으면이 솔루션이 작동합니다. 나는 이것이 호환성 측면에서 완벽한 솔루션이 아닐 수도 있다는 것을 알고 있지만 이것이 절대적으로 필요한 경우 작동합니다.
자바 스크립트 사용 :
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"
a:hoverCSS 규칙이 아닌 선택기의 일부 이기 때문에 설명하는 내용을 정확히 수행 할 수 없습니다 . 스타일 시트에는 두 가지 구성 요소가 있습니다.
selector {rules}
인라인 스타일에는 규칙 만 있습니다. 선택자는 현재 요소가 묵시적입니다.
선택기는 XML과 유사한 문서의 요소와 일치하는 기준 집합을 설명하는 표현 언어입니다.
그러나 style세트는 기술적으로 거의 모든 곳으로 갈 수 있기 때문에 가까이 갈 수 있습니다.
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
인라인 가상 클래스 선언은 현재 CSS 반복에서 지원되지 않습니다 (하지만 내가 이해 한 바에 따르면 향후 버전에 나올 수 있음).
현재로서는 스타일을 지정할 링크 바로 위에 스타일 블록을 정의하는 것이 가장 좋습니다.
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
다음은 최고의 코드 예입니다.
<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'
}지적했듯이 호버에 대해 임의의 인라인 스타일을 설정할 수는 없지만 적절한 태그에서 다음을 사용하여 CSS 에서 호버 커서의 스타일을 변경할 수 있습니다 .
style="cursor: pointer;"
<style>a:hover { }</style>
<a href="/">Go Home</a>
Hover is a pseudo class, and thus cannot be applied with a style attribute. It is part of the selector.
According to your comments, you're sending a JavaScript file anyway. Do the rollover in JavaScript. jQuery's $.hover() method makes it easy, as does every other JavaScript wrapper. It's not too hard in straight JavaScript either.
There is no way to do this. Your options are to use a JavaScript or a CSS block.
Maybe there is some JavaScript library that will convert a proprietary style attribute to a style block. But then the code will not be standard-compliant.
You can do this. But not in inline styles. You can use onmouseover and onmouseout events:
<div style="background: #333; padding: 10px; cursor: pointer"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
Hover on me!
</div>I just figured out a different solution.
My issue: I have an <a> tag around some slides/main content viewer as well as <a> tags in the footer. I want them to go to the same place in IE, so the whole paragraph would be underlined onHover, even though they're not links: the slide as a whole is a link. IE doesn't know the difference. I also have some actual links in my footer that do need the underline and color change onHover. I thought I would have to put styles inline with the footer tags to make the color change, but advice from above suggests that this is impossible.
Solution: I gave the footer links two different classes, and my problem was solved. I was able to have the onHover color change in one class, have the slides onHover have no color change/underline, and still able to have the external HREFS in the footer and the slides at the same time!
I agree with shadow. You could use the onmouseover and onmouseout event to change the CSS via JavaScript.
And don't say people need to have JavaScript activated. It's only a style issue, so it doesn't matter if there are some visitors without JavaScript ;) Although most of Web 2.0 works with JavaScript. See Facebook for example (lots of JavaScript) or Myspace.
This is pretty late in the game, but when would you use JavaScript in an HTML Email? For example, at the company I currently work for (rhymes with Abodee), we use the lowest common denominator for most email marketing campaigns – and JavaScript is just not being used. Ever. Unless you are referring to some kind of pre-processing.
As mentioned in a related post: "Lotus Notes, Mozilla Thunderbird, Outlook Express, and Windows Live Mail all seem to support some sort of JavaScript execution. Nothing else does."
Link to the article from which this was taken: [http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]
Also, how would hovering translate to mobile devices? That's why I like the answer from above:Long answer: you shouldn't.
If anyone has more insights into this subject, please feel free to correct me. Thank you.
So this isn't quite what the user was looking for, but I found this question searching for an answer and came up with something sort of related. I had a bunch of repeating elements that needed a new color/hover for a tab within them. I use handlebars, which is key to my solution, but other templateing languages may also work.
I defined some colors and passed them into the handlebars template for each element. At the top of the template I defined a style tag, and put in my custom class and hover color.
<style type="text/css">
.{{chart.type}}-tab-hover:hover {
background-color: {{chart.chartPrimaryHighlight}} !important;
}
</style>
Then I used the style in the template:
<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
Payouts
</span>
You may not need the !important
I had to avoid javascript, but could go with server side code.
so I generated an id, created a style block, generated the link with that id. Yes its valid 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>You can use the pseudo-class a:hover in external style sheets only. Therefore I recommend using an external style sheet. The code is:
a:hover {color:#FF00FF;} /* Mouse-over link */
You can do id by adding a class but never inline.
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
2 lines but you can re-use the class everywhere.
My problem was that I'm building a website which uses a lot of image-icons that have to be swapped by a different image on hover (e.g. blue-ish images turn red-ish on hover). I produced the following solution for this:
.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>I introduced a container containing the pair of images. The first is visible and the other is hidden (display:none). When hovering the container, the first becomes hidden (display:none) and the second shows up again (display:block).
참고URL : https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css
'programing tip' 카테고리의 다른 글
| Java 클래스 경로 내의 디렉토리에있는 모든 jar 포함 (0) | 2020.09.28 |
|---|---|
| 동시성과 병렬성의 차이점은 무엇입니까? (0) | 2020.09.28 |
| 왼쪽에 0이있는 정수를 어떻게 채울 수 있습니까? (0) | 2020.09.28 |
| Java에서 현재 스택 추적 가져 오기 (0) | 2020.09.28 |
| 여러 열에서 그룹화 사용 (0) | 2020.09.28 |