Question

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

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/

Answer 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 / 我</span>
</span>
<span class="hovertarget">
  <span class="word" >drink</span>
  <span class="hover">drink / 和</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;
}

Answer 2

这是对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

Answer 3

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

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

在悬停事件中，使用父元素中的数据更改内容

3 个答案: