我希望悬停伪元素使用父元素(悬停)的数据设置子元素的内容。以下片段显示了一个小测试:
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。
最佳答案
这是 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');
}
}
};
关于css - 在悬停事件中,使用父元素中的数据更改内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17780659/