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

Question

我希望悬停伪元素使用父元素(悬停)的数据设置子元素的内容。以下片段显示了一个小测试:

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

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