인라인 CSS에서 'a:hover'를 어떻게 쓸 수 있습니까?
인라인 CSS 코드를 작성해야 하는 경우가 있는데, 앵커에 호버 스타일을 적용하고 싶습니다.
을 어떻게 합니까?a:hoverHTML 스타일 속성 내의 인라인 CSS에서?
예를 들어 HTML 이메일에서 CSS 클래스를 안정적으로 사용할 수 없습니다.
단답: 할 수 없습니다.
긴 대답: 그러면 안 됩니다.
클래스 이름 또는 ID를 지정하고 스타일시트를 사용하여 스타일을 적용합니다.
:hover는 유사 선택기이며 CSS의 경우 스타일 시트 내에서만 의미가 있습니다.선택 기준을 정의하지 않기 때문에 인라인 스타일에 해당하는 것은 없습니다.
OP의 의견에 대한 답변:
동적으로 CSS 규칙을 추가하는 좋은 스크립트는 Javascript를 사용한 전체 Pwn 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>
주의: 위에서는 헤드 섹션이 있는 것으로 가정합니다.
은 자바스크립트에서 수 .onMouseOver그리고.onMouseOut매개 변수(둘 이상의 요소를 변경해야 하는 경우에는 매우 비효율적이지만):
<a href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'" >Text</a>또한, 나는 확실히 기억할 수 없습니다.this이러한 맥락에서 작동합니다.로 전환해야 할 수도 있습니다.document.getElementById('idForLink').
당신은 과거의 어느 시점에서 그것을 할 수 있었습니다.하지만 지금은 (동일한 기준, 즉 후보 추천의 최근 개정에 따라) 그럴 수 없습니다.
당신은 당신이 묘사하고 있는 것을 정확히 할 수 없습니다, 왜냐하면a:hoverCSS 규칙이 아닌 선택기의 일부입니다.스타일시트에는 두 가지 구성요소가 있습니다.
selector {rules}
인라인 스타일에는 규칙만 있으며 선택기는 현재 요소로 암시적입니다.
선택기는 XML과 유사한 문서의 요소와 일치하는 기준 집합을 설명하는 표현형 언어입니다.
하지만, 당신은 가까이 갈 수 있습니다, 왜냐하면.style기술적으로 거의 어디든 갈 수 있습니다.
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
실제로 인라인 코드가 필요한 경우 이 작업을 수행할 수 있습니다.호버 버튼이 필요했는데 방법은 다음과 같습니다.
.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;"는 호버에 있는 스위치 색상입니다.필요한 색상을 사용하면 이 솔루션이 작동합니다.호환성 측면에서 이것이 완벽한 해결책이 아닐 수도 있다는 것을 알지만, 이것이 꼭 필요하다면 효과가 있습니다.
호버 규칙을 인라인으로 정의하는 것은 불가능한 것처럼 보이지만 CSS 변수를 사용하여 스타일 값을 인라인으로 정의할 수 있습니다.
:hover {
color: var(--hover-color);
}<a style="--hover-color: green">
Library
</a> 선기이외속에성또예사것고클을려다니합는용하를스래는택예(▁in:다▁consider니) 외에 하는 것을 합니다.[hover-color]:hover) 규칙스타일을 할 수 다른 저특이성 호버 색상 변경 규칙(예: CSS 재설정 또는 기본 스타일을 사용하는 일부 요소)과 공존할 수 있습니다.
JavaScript 사용:
인라인 스타일 추가
document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');
또는 조금 더 어려운 방법 - "전환" 추가
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-size자바스크립트에서는 다음과 같이 작성됩니다.
element.style.fontSize="12px"
다음은 가장 좋은 코드 예입니다.
<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>제이에스
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 type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
지적했듯이 호버에 대한 임의 인라인 스타일을 설정할 수는 없지만 적절한 태그의 다음을 사용하여 CSS에서 호버 커서의 스타일을 변경할 수 있습니다.
style="cursor: pointer;"
당신은 이걸 할 수 있다.하지만 인라인 스타일은 아닙니다.사용할 수 있습니다.onmouseover그리고.onmouseout이벤트:
<div style="background: #333; padding: 10px; cursor: pointer"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
Hover on me!
</div><style>a:hover { }</style>
<a href="/">Go Home</a>
호버는 유사 클래스이므로 스타일 특성을 적용할 수 없습니다.셀렉터의 일부입니다.
당신의 의견에 따르면, 당신은 어쨌든 자바스크립트 파일을 보내는 것입니다.JavaScript에서 롤오버를 수행합니다.jQuery's$.hover()메소드를 사용하면 다른 모든 자바스크립트 래퍼와 마찬가지로 쉽게 만들 수 있습니다.스트레이트 자바스크립트에서도 그리 어렵지 않습니다.
이것을 할 방법이 방법이 없습니다.당신의 옵션은 자바스크립트나 CSS 블록을 사용하는 것입니다.
사유 스타일 속성을 스타일 블록으로 변환하는 JavaScript 라이브러리가 있을 수 있습니다.하지만 그러면 코드가 표준을 준수하지 않을 것입니다.
다양한 유형의 코드를 작성할 수 있습니다.
우선 나는 이것을 쓸 수 있습니다.
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 함수의 기본이 되는 함수를 준비합니다.두 번째로, 이 함수에는 호버 함수가 있습니다.포인터를 텍스트로 이동하면 색이 변경되고 다음에 텍스트로 포인터를 놓으면 다른 색이 됩니다. 이것이 세 번째 기능입니다.
방금 다른 해결책을 찾았어요.
의 문제 는 문제가 .<a>일부 슬라이드/주요 콘텐츠 뷰어 및<a>바닥글에 태그가 있습니다.IE에서 이 그어져 있을 입니다. 그래서 전체 단락에 밑줄이 그어져 있을 것입니다.onHover링크는 아니지만 슬라이드 전체가 링크입니다.IE는 그 차이를 모릅니다. 바닥글에 한 실제 .onHover저는 바닥글 태그에 스타일을 맞춰야 색이 바뀔 것이라고 생각했는데, 위에서 조언한 바로는 불가능하다고 합니다.
: 저는 에 두 클래스를 , 제 해결되었습니다.저는 바닥글 링크에 두 가지 다른 클래스를 부여했고, 제 문제는 해결되었습니다.나는 그것을 가질 수 있었습니다.onHover, 슬라이드를 .onHover색상 변경/밑줄이 없으며 바닥글과 슬라이드에 외부 HREFS를 동시에 넣을 수 있습니다!
정확히 인라인 CSS는 아니지만 인라인 CSS입니다.
<a href="abc.html" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'">Text</a>그림자의 말에 동의합니다.당신은 사용할 수 있습니다.onmouseover그리고.onmouseoutJavaScript를 통해 CSS를 변경하는 이벤트입니다.
그리고 사람들이 자바스크립트를 활성화해야 한다고 말하지 마세요.스타일 문제일 뿐이므로 JavaScript가 없는 방문자가 있어도 상관없습니다. ;) 대부분의 Web 2.0은 JavaScript와 함께 작동합니다.예를 들어 Facebook(JavaScript가 많이 있음)
그래서 이것은 사용자가 찾던 것은 아니지만, 저는 답을 찾는 이 질문을 발견하고 관련된 것을 생각해냈습니다.반복적인 요소들이 많이 있어서 탭을 위한 새로운 색상/호버가 필요했습니다.솔루션의 핵심인 핸들바를 사용하지만 다른 템플릿 언어도 작동할 수 있습니다.
저는 몇 가지 색상을 정의하고 각 요소의 핸들 바 템플릿에 전달했습니다.템플릿 맨 위에 스타일 태그를 정의하고 사용자 정의 클래스와 호버 색상을 넣었습니다.
<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
"해서는 안 된다"는 맥락이 적용될 수 있지만 여전히 이를 달성하고 싶은 경우가 있을 수 있습니다.제 사용 사례는 일부 데이터 값에 따라 호버 색상을 동적으로 설정하여 CSS로만 특수성의 이점을 얻을 수 있도록 하는 것이었습니다.
CSS에만 접근
CSS
/* Set your parent color for the inherit property */
.sidebar {
color: green;
}
/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
color: inherit
}
.list-item a:hover {
color: inherit
}
/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
color: inherit !important;
}
그러면 마크업은 다음과 같습니다.
마크업
<nav class="sidebar">
<ul>
<li class="list-item">
<a
href="/foo"
class="dynamic-hover-color"
style="color: #{{category.color}};"
>
Category
</a>
</li>
</ul>
</nav>
저는 핸들을 사용하여 이 예제를 수행하고 있지만, 아이디어는 사용 사례에 편리한 모든 것을 가져가서 인라인 스타일을 설정하는 것입니다(원하는 색상을 수동으로 적더라도).
다음과 같은 인라인 스타일시트 문을 사용할 수 있습니다.
<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>
클래스 유클를사수있습다니용할스래사▁the▁pseudo를 사용할 수 .a:hover외부 스타일 시트에서만 사용할 수 있습니다.따라서 외부 스타일 시트를 사용하는 것을 추천합니다.코드는 다음과 같습니다.
a:hover {color:#FF00FF;} /* Mouse-over link */
클래스를 추가하여 id를 수행할 수 있지만 인라인은 사용할 수 없습니다.
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
두 줄이지만, 당신은 어디서나 수업을 재사용할 수 있습니다.
문제는 마우스 커서를 이동할 때 다른 이미지로 전환해야 하는 이미지 아이콘을 많이 사용하는 웹 사이트를 만들고 있다는 것입니다(예: 파란색 이미지가 마우스 커서를 이동할 때 빨간색으로 바뀝니다).저는 이를 위해 다음과 같은 솔루션을 개발했습니다.
.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>저는 한 쌍의 이미지가 들어 있는 컨테이너를 소개했습니다.첫 번째는 표시되고 다른 하나는 숨겨집니다(표시: 없음).용기를 호버링하면 첫 번째가 숨겨지고(표시 없음) 두 번째가 다시 표시됩니다(표시:블록).
언급URL : https://stackoverflow.com/questions/1033156/how-can-i-write-ahover-in-inline-css
'programing' 카테고리의 다른 글
| Swift 3에서 디스패치 대기열을 생성하는 방법 (0) | 2023.05.21 |
|---|---|
| 페이지화를 위해 MongoDB 집계를 사용하는 방법은 무엇입니까? (0) | 2023.05.21 |
| 스택과 힙은 무엇이며 어디에 있습니까? (0) | 2023.05.21 |
| C#에서 스트림을 바이트[]로 변환하려면 어떻게 해야 합니까? (0) | 2023.05.21 |
| Github에서 저장소를 폴더로 정렬할 수 있습니까? (0) | 2023.05.21 |