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

I'm intending to use this for a report-writing system: I have a list of conclusions at the top, which I want to hover over and highlight the corresponding section in the Contents menu on the right. Fiddle here.

我打算将它用于报表编写系统:我在顶部有一个结论列表,我想将其悬停在上面并突出显示右侧内容菜单中的相应部分。在这里小提琴。

Judging by this question (and it's answers) I know the text being highlighted needs to be a child of the text you're hovering over, but I'm not entirely sure how to implement this in the form I have it; both are components I want and it'd be great if they could work together.

从这个问题判断(以及它的答案)我知道被突出显示的文本需要是你正在盘旋的文本的孩子,但我不完全确定如何以我拥有它的形式实现它;两者都是我想要的组件,如果它们可以一起工作就会很棒。

Main 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>

Main CSS:

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

So my questions are:

所以我的问题是:

Is it even possible to implement this using only HTML and CSS

甚至可以仅使用HTML和CSS来实现它

If so what could be a good starting point to get the effect I'm after?

如果是这样,那么可能是一个很好的起点来获得我所追求的效果?

If not would this be something I would be able to implement using javascript?

如果不是,这将是我能用javascript实现的东西?

1 个解决方案

#1

This is not possible to implement using only HTML and CSS.

仅使用HTML和CSS无法实现。

Using Javascript, you can surely implement this. I'd recommend using the jQuery javascript library.

使用Javascript,您肯定可以实现这一点。我建议使用jQuery javascript库。

Include this code in your html -

在您的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