在懸停事件上，使用來自父元素的數據更改內容

我希望懸浮僞元素使用父級（懸停）中的數據設置子內容。下面的代碼片段顯示了一個小測試：在懸停事件上，使用來自父元素的數據更改內容

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>

然而，時設置的內容是從目標數據測試 '咄！'而不是被徘徊的人。我可以用JavaScript輕鬆解決這個問題，但是看看是否可以使用CSS。

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

來源

2013-07-22 gbraad

請，不提供在JavaScript中完成的解決方案，這是很容易。問題是如果這隻能使用CSS來完成。用例本身處理ruby標籤，因此也不能使用隱藏和顯示跨度。 – gbraad

總之，你的問題的答案是否定的，這不能用CSS來完成。我在JavaScript中提供了一個簡單的選擇。 –

-1

根據Mozilla的文檔，編號：https://developer.mozilla.org/en-US/docs/Web/CSS/attr

的ATTR（）CSS表達用於檢索所選擇的元素的屬性的值，並且在樣式表使用它。

來源

2013-07-22 05:49:51 stefancarlton

，這有助於如何？ – Liam

指出你不能讓CSS選擇器訪問另一個元素 - 因此，提出的問題有答案「不」。 – stefancarlton

這裏的問題是，可以選擇前一個/父元素的數據。在今天早些時候閱讀MDN之後，我實際上得出了同樣的結論，但是好奇的是，如果CSS表達式提及這兩個元素，那麼'selected'的含義是否可以擴展。 – gbraad

我解決這將是 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; 
}

來源

2013-07-22 05:50:53

做了一個小提琴來確認這將工作：http://jsfiddle.net/ZcrWb/ – Liam

不能以與內容本身切換類似的方式工作。原始的小提琴使用一個div來放置查找信息。這也可以防止在某些瀏覽器中懸停事件的'觸發快樂'，因爲現在甚至很難選擇'咖啡'這個詞並查看查找。 – gbraad

使用錨定標籤並按照您的樣式設計 –

也就是說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-22 05:52:22

感謝您編輯答案並添加「無法使用」，因爲我也相信JavaScript是解決此問題的唯一方法。 – gbraad

在懸停事件上，使用來自父元素的數據更改內容

回答

相關問題