Question

选择器#div1 p:hover + #div2 img无效，我无法理解原因。尝试在div 1中的对象上创建hover会影响div2中仅使用CSS的对象的CSS设置。请帮忙。

我正在使用Chrome。

＆＃13;

#div1 #x:hover + #div2 #y {
  width: 200px;
}

＆＃13;

<div id="content">
  <div id="div1">
    <p id="x">1234</p>
  </div>
  <div id="div2">
    <img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
  </div>
</div>

＆＃13;

JSBin Demo

Answer 1

这不起作用，因为#div2不是p标记的adjacent sibling（实际上甚至不是兄弟）。它是#div1的兄弟姐妹。

以下是您的选择器的解释方式。

#div1 #x:hover +  #div2 #y

当鼠标结束（或hover）且id='x'元素是id='div1'元素的子元素时，请在另一个元素下选择id='y'元素id='div2' id='x'，它是#div2元素的相邻兄弟。

如果您想使上述选择器正常工作，则应更改HTML，如下面的代码段所示。请注意，在此示例中，#x是#div1 #x:hover + #div2 #y { width: 200px; }的相邻兄弟。

＆＃13;

<div id="content">
  <div id="div1">
    <p id="x">1234</p>
    <div id="div2">
      <img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
    </div>
  </div>
</div>

＆＃13;

#div1

＆＃13;

另一个选项（如果您的#x没有hover 以外的元素）将#div1放在#div1:hover + #div2 #y { width: 200px; }本身上在以下代码段中。

＆＃13;

<div id="content">
  <div id="div1">
    <p id="x">1234</p>
  </div>
  <div id="div2">
    <img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
  </div>
</div>

＆＃13;

classList

＆＃13;

如果以上都不能应用，那么你必须使用JavaScript（或jQuery之类的各种JS库之一）来实现你所需要的。以下是使用JavaScript的示例（使用HTML5 mouseover功能，但也可以轻松修改非HTML5兼容的浏览器。）

在此示例中，我们为mouseout元素上的#x和.test事件添加处理程序，并切换width类（更改#y ）document.getElementById('x').onmouseover = function() { document.getElementById('y').classList.add('test'); } document.getElementById('x').onmouseout = function() { document.getElementById('y').classList.remove('test'); }元素。

＆＃13;

.test {
  width: 200px;
}

＆＃13;

<div id="content">
  <div id="div1">
    <p id="x">1234</p>
  </div>
  <div id="div2">
    <img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

相邻的兄弟选择器未按预期工作

1 个答案: