0

我希望悬停伪元素使用来自父级的数据（悬停）设置子级的内容。以下片段显示了一个小测试：

CSS

.word:hover {
    color: blue;
}
.word:hover ~ #lookup:after {
    content : attr(data-test);
}

HTML

<span class="word" data-test="elke dag / 每天">everyday</span>
<span class="word" data-test="Ik / 我">I</span>
<span class="word" data-test="drink / 喝">drink</span>
<span class="word" data-test="koffie / 咖啡">coffee</span>
<div id="lookup" data-test="Duh!">Lookup: </div>

但是，设置的内容是来自目标“Duh！”的数据测试 而不是悬停在上面的那个。我可以用 JavaScript 轻松解决这个问题，但看看是否可以只使用 CSS。

http://jsfiddle.net/u7tYE/1951/

4

3 回答 3

1

我解决这个问题的方法是html：

<span class="hovertarget">
  <span class="word" >everyday</span>
  <span class="hover">elke dag / 每天</span>
</span>
<span class="hovertarget">
  <span class="word" >I</span>
  <span class="hover">Ik / 我&lt;/span>
</span>
<span class="hovertarget">
  <span class="word" >drink</span>
  <span class="hover">drink / 和&lt;/span>
</span>
<span class="hovertarget">
  <span class="word" >coffee</span>
  <span class="hover">koffie / 咖啡</span>
</span>

CSS：

.hover {
 display:none;
}
.hovertarget:hover .word {
 display: none;
}
.hovertarget:hover .hover {
 display: block;
}
于 2013-07-22T05:50:53.627 回答
1

这是对 CSS3 技术的一个非常聪明的用法，但不幸的是，我认为没有办法只用 CSS 来做你想做的事情。问题是您不能attr()从不同于您当前所在的选择器中使用其他选择器。解决方法在 JavaScript 中非常简单。

window.onload = function() {
    var lookup = document.getElementById('lookup'),
        words = document.querySelectorAll('.word');

    for(var i = 0; i < words.length; i++) {
        words[i].mouseover = function() {
            lookup.innerHTML = 'Lookup: '+ this.getAttribute('data-test');
        }
    }
};

JSFiddle

于 2013-07-22T05:52:22.050 回答
-1

根据 mozilla 文档，否：https ://developer.mozilla.org/en-US/docs/Web/CSS/attr

attr() CSS 表达式用于检索所选元素的属性值并在样式表中使用它。

于 2013-07-22T05:49:51.340 回答