0

#match1当我悬停时不会改变#id1？当它们都在页面上的同一个 div 元素中但现在#id1在另一个 div 中时停止工作时，它起作用了。

我只想使用 CSS 而不是 javascript！

http://jsfiddle.net/fHZEN/

HTML

<div>
    <div id="id1">DIV</div> 
    <div id="id2">DIV</div> 
    <div id="id3">DIV</div> 
</div>


<div id="match1">a </div>
<div id="match2">b </div>
<div id="match3">c </div>

CSS

#id1:hover ~ #match3 {
  color: red;  
    font-weight:bold;
    font-size:40px;
}
4

2 回答 2

1

您正在使用前面的选择器

前面的选择器以与目标相同的父元素为目标的先例元素因此，如果要定位 id1 前面的 match3 div，则标记应如下所示

<div>
    <div id="id1">DIV</div> 
    <div id="id2">DIV</div> 
    <div id="id3">DIV</div> 
    <div id="match1">a </div>
    <div id="match2">b </div>
    <div id="match3">c </div>
</div>

但是...尽管如此，如果您正在寻找的是在悬停 id1 时同时定位（match3 和 id1），那么如果没有 javascript，您将无法做到这一点

这是因为您只有一个主题，并且它以选择器链中最简单的选择器为目标。

#id1:hover ~ #match3 {
  color: red;  
    font-weight:bold;
    font-size:40px;
}
于 2013-05-14T11:38:57.167 回答
0

斯文没有回答这个问题。用户要求在不同的 div 上创建效果，而不是悬停的那个。

,~和运算+符>仅在可以在不同容器之间建立关系时才起作用。这就是为什么当它们都在相同div或在其中时，<body>它可以正常工作，但在其他情况下根本不起作用。

不幸的是，据我所知，您需要使用更复杂的脚本才能使这种事情起作用，或者强制它们共享同一个容器（如果可能的话）。

于 2013-05-14T11:31:46.883 回答