Question

我打算将它用于报告编写系统：我在顶部有一个结论列表，我想悬停在上面，并突出显示右侧内容菜单中的相应部分。 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的？

Answer 1

仅使用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

将鼠标悬停在不同文本上时更改文本颜色？

1 个答案: