CSS: di chuột qua phần tử khác?

Question

Câu hỏi ngắn: Tại sao background-color của .b không thay đổi khi tôi di chuột? .a?

CSS

.a { 
    color: red; 
} 

.b { 
    color: orange; 
} 

.a:hover .b { 
    background-color: blue; 
} 

HTML

<div id="wrap"> 
    <div class="a">AAAA</div> 
    <div class ="b">BBBB</div> 
</div> 

http://jsfiddle.net/2NEgt/

Answer 1

Bạn cần có .a:hover + .b thay vì .a:hover .b

.a:hover .b sẽ làm việc cho một cấu trúc giống như

<div class="a">AAAA 
    <div class ="b">BBBB</div> 
</div> 

Nếu lúc nào đó bạn sẽ cần phải có một số yếu tố giữa .a và .b , sau đó bạn sẽ cần sử dụng .a:hover ~ .b, hoạt động cho tất cả anh chị em của .a sẽ đến sau số, chứ không phải chỉ số tiếp theo.

Demo http://jsfiddle.net/thebabydino/EajKf/

Answer 2

vì .b không phải là một đứa trẻ của .a, vì vậy chọn được không tìm thấy bất cứ điều gì. Sử dụng javascript để làm những gì bạn muốn làm ở đó.

Answer 3

Bạn không nên thay đổi kiểu của anh chị em khi sự kiện diễn ra trên một phần tử khác. Nó nằm ngoài ngữ cảnh của CSS.

Sử dụng Javascript để đạt được điều này, ví dụ:

var wrap = document.getElementById("wrap"); 
var aDiv = wrap.getElementsByClassName("a")[0]; 
var bDiv = wrap.getElementsByClassName("b")[0]; 
aDiv.onmouseover = function() { 
    bDiv.style.backgroundColor = "red"; 
}; 
aDiv.onmouseout = function() { 
    bDiv.style.backgroundColor = "white"; 
}; 

Answer 4

Bạn có thể không làm một cái gì đó giống như a:hover + b? thấy http://meyerweb.com/eric/articles/webrev/200007a.html

Answer 5

Bạn có thể sử dụng + selector

.a:hover + .b { 
    background-color: blue; 
} 

áp dụng css cho các phần tử anh chị em, hoặc

.a:hover > .b { 
    background-color: blue; 
} 

cho lớp lồng nhau.

Answer 6

Có hai việc bạn có thể làm.

Hoặc thay đổi HTML của bạn để làm cho .b một đứa trẻ của .a

<div id="wrap"> 
    <div class="a">AAAA 
     <div class ="b">BBBB</div>   
    </div> 
</div> 

HOẶC

Thay đổi css của bạn để sử dụng bộ chọn liền kề

.a:hover + .b { 
    background-color: blue; 
} 

Answer 7

không js cần http://jsfiddle.net/2NEgt/3/

Answer 8

cố gắng hiểu điều này Ví dụ:
mã html

<p>Hover over 1 and 3 gets styled.</p> 
<div id="one" class="box">1</div> 
<div id="two" class="box">2</div> 
<div id="three" class="box">3</div> 

<!--css--> 
#one:hover ~ #three{ 
background-color: black; 
color: white; 
} 
.box { 
cursor: pointer; 
display: inline-block; 
height: 30px; 
line-height: 30px; 
margin: 5px; 
outline: 1px solid black; 
text-align: center; 
width: 30px; 
} 

khi bạn di chuột trên hộp 1 so với hộp 3 sẽ nhận được màu đen

Answer 9

Jquery là một giải pháp tốt và dễ dàng:

html:

<div class="a">AAA</div> 
<div class="b">BBB</div> 

tập lệnh: Đặt tập lệnh này vào html của bạn nếu bạn muốn. Đó là tất cả.

<script> 
     $(".a").mouseover(function(){ 
     $(".b").css("color", "blue"); 
     }); 
     $(".a").mouseleave(function(){ 
     $(".b").css("color", "red"); 
     }); 
</script>