10

background-color短い質問: ホバーしてものが.b変わらないのはなぜですか? .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/

4

9 に答える 9

46

あなたは.a:hover + .b代わりに持っている必要があります.a:hover .b

.a:hover .b次のような構造で機能します

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

ある時点で.aと.bの間にいくつかの要素が必要になる場合は、を使用する必要があります。これは、次の兄弟だけでなく、その後に続くすべての兄弟.a:hover ~ .bに対して機能します。.a

デモhttp://jsfiddle.net/thebabydino/EajKf/

于 2012-07-16T15:33:19.530 に答える
6

+セレクターを使用できます

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

兄弟要素にcssを適用する、または

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

ネストされたクラスの場合。

于 2012-07-16T15:34:02.947 に答える
6

のようなことはできませんa:hover + bか？http://meyerweb.com/eric/articles/webrev/200007a.htmlを参照してください。

于 2012-07-16T15:33:05.350 に答える
3

.b は .a の子ではないため、そのセレクターは何も見つけられません。あなたがそこでやりたいことをするためにjavascriptを使ってください。

于 2012-07-16T15:30:33.367 に答える
2

できることは2つあります。

HTMLを変更して.b、の子を作成します.a

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

また

隣接するセレクターを使用するようにCSSを変更します

.a:hover + .b {
    background-color: blue;
}
于 2012-07-16T15:34:17.970 に答える
1

jsは必要ありませんhttp://jsfiddle.net/2NEgt/3/

于 2012-07-16T15:34:32.053 に答える
0

Jquery は優れた簡単なソリューションです。

html:

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

script: 必要に応じて、このスクリプトを HTML に追加します。それで全部です。

<script>
      $(".a").mouseover(function(){
        $(".b").css("color", "blue"); 
      });
      $(".a").mouseleave(function(){
        $(".b").css("color", "red");
      });
</script>
于 2014-09-03T23:25:28.507 に答える
0

イベントが別の要素で発生した場合、兄弟のスタイルを変更しないでください。これは CSS のコンテキストから外れています。

これを実現するには、JavaScript を使用します。たとえば、次のようにします。

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";
};
于 2012-07-16T15:30:48.710 に答える
0

この例を理解しよう:
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;
}

ボックス 1 にカーソルを合わせると、ボックス 3 が黒色になります

于 2014-06-14T14:55:42.400 に答える