CODEWITHSUNDEEP
javascripthtmlcss
Laurengineer
Laurengineer

Reputation: 747

Change color of text while hovering over different text?

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:

  1. Is it even possible to implement this using only HTML and CSS
  2. If so what could be a good starting point to get the effect I'm after?
  3. If not would this be something I would be able to implement using javascript?

Upvotes: 0

Views: 113

Answers (1)

v2solutions.com
v2solutions.com

Reputation: 1439

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

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

Include this code in your 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

Upvotes: 1

Related Questions