將鼠標懸停在不同文本上時，更改文本的顏色？

我打算將其用於報告撰寫系統：我在頂部列出了一些結論列表，我想將鼠標懸停在上方，並突出顯示右側內容菜單中的相應部分。 Fiddle here.將鼠標懸停在不同文本上時，更改文本的顏色？

根據this question（及其答案）判斷，我知道被突出顯示的文本需要是您徘徊的文本的子文件，但我不完全確定如何以我擁有它的形式實現它;兩者都是我想要的組件，如果它們能夠一起工作，那將是非常棒的。

主要HTML：

<div id="menu"> 
    <h3>Contents</h3> 
    <ul id="menuItem"> 
     <li id="CS1"><a href="#S1">Section 1</a></li> 
     <li id="CS2"><a href="#S2">Section 2</a></li> 
     <li id="CS3"><a href="#S3">Section 3</a></li> 
    </ul> 
</div> 

<h3>Conclusions</h3> 
<ul> 
    <li id="C1">Concluding point 1</li> 
    <li id="C2">Concluding point 2</li> 
    <li id="C3">Concluding point 3</li> 
</ul>

主要CSS：

#C1:hover > #CS3 { 
    color: red; 
}

所以我的問題是：

它甚至有可能實現這個僅使用HTML和CSS
如果是這樣的話，我可能是一個很好的起點，我是之後？
如果不是這樣，我將能夠使用 JavaScript實現的東西？

來源

2014-09-26 LADransfield

我覺得你的助手是JQuery的。這很簡單:) – hakiko 2014-09-26 12:41:25

我不認爲這是可能的，沒有JS ... – Greenhorn 2014-09-26 12:50:05

這是不可能實現僅使用HTML和CSS。

使用Javascript，你當然可以實現這一點。我建議使用jQuery JavaScript庫。

包含這些代碼在你的HTML -

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script> 
$(function(){ 

    $("#C1, #C2, #C3").on('mouseover', function(){ 
     var id = $(this).attr('id'); 
     var index = id.slice(-1);   
     $("#CS1, #CS2, #CS3").children('a').css('color', ''); 
     $("#CS"+index+" a").css('color', 'red'); 
    }); 

}); 
</script>

Check fiddle here

來源

2014-09-26 13:13:47

輝煌。我猜是腳本使用「索引」，如果結論與章節不同步，這將不起作用？沒有必要，只是試圖獲得一些理解:) – LADransfield 2014-09-26 13:19:14

你是對的，如果'結論'的ID與'Sections'的Id不同步，那麼這個代碼將不起作用。最好保持同步，避免編寫額外的代碼來將每個'結論'映射到其相應的'部分'。 – 2014-09-26 13:25:52

將鼠標懸停在不同文本上時，更改文本的顏色？

回答

相關問題