CSS : 하나의 요소를 가리키면 여러 요소에 효과가 있습니까?
내 호버링 문제에 대한 방법을 찾고 있습니다.
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
이제 두 클래스, 이미지 및 레이어에 테두리가 있습니다. 둘 다 노멀과 호버의 색상이 다릅니다. 그것을 만드는 방법이 있습니까? 그래서 레이어 클래스를 가리키면 레이어와 이미지 클래스가 테두리 색상을 가리키면 모두 활성화됩니까? 그리고 그 반대?
이를 위해 JavaScript가 필요하지 않습니다.
일부 CSS는 그것을 할 것입니다. 다음은 그 예입니다.
<html>
<style type="text/css">
.section { background:#ccc; }
.layer { background:#ddd; }
.section:hover img { border:2px solid #333; }
.section:hover .layer { border:2px solid #F90; }
</style>
</head>
<body>
<div class="section">
<img src="myImage.jpg" />
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>이것은 Firefox와 Chrome 및 IE8에서 저에게 효과적이었습니다 ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div.section:hover div.image, div.section:hover div.layer {
border: solid 1px red;
}
</style>
</head>
<body>
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>
... IE6에서도 이것을 테스트하고 싶을 수 있습니다 (그게 작동하는지 확실하지 않습니다).
가장 좋은 방법은 두 div를 다른 div로 묶는 것입니다. 그런 다음 다음과 같은 방법으로 CSS로 만들 수 있습니다.
<html>
<head>
<style>
div.both:hover .image { border: 1px solid blue }
div.both:hover .layer { border: 1px solid blue }
</style>
</head>
<body>
<div class="section">
<div class="both">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
</div>
</body>
</html>
이것은 달성하기 어렵지 않지만 자바 스크립트 onmouseover기능 을 사용해야합니다 . 의사 스크립트 :
<div class = "section">
<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
Use your own colors. You can also reference javascript functions in the mouseover command.
You'd need to use JavaScript to accomplish this, I think.
jQuery:
$(function(){
$("#innerContainer").hover(
function(){
$("#innerContainer").css('border-color','#FFF');
$("#outerContainer").css('border-color','#FFF');
},
function(){
$("#innerContainer").css('border-color','#000');
$("#outerContainer").css('border-color','#000');
}
);
});
Adjust the values and element id's accordingly :)
OR
.section:hover > div {
background-color: #0CF;
}
NOTE Parent element state can only affect a child's element state so you can use:
.image:hover + .layer {
background-color: #0CF;
}
.image:hover {
background-color: #0CF;
}
but you can not use
.layer:hover + .image {
background-color: #0CF;
}
참고URL : https://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements
'Development Tip' 카테고리의 다른 글
| node-sass (Ruby 없음)를 사용하여 sass / scss를 css로 컴파일하거나 변환하는 방법은 무엇입니까? (0) | 2020.10.15 |
|---|---|
| CSS에서 maxlength를 지정할 수 있습니까? (0) | 2020.10.15 |
| 테이블 이름 지정 : 밑줄 대 Camelcase? (0) | 2020.10.15 |
| Intent.FLAG_ACTIVITY_CLEAR_TOP를 사용하여 활동 스택을 지우는 방법은 무엇입니까? (0) | 2020.10.15 |
| PSR-0은 무엇을 의미합니까? (0) | 2020.10.14 |