Hover-over div's to switch them on

Question

Hover-over div's to switch them on

I am faced with a challenge involving a UL list structured like this:

<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
....
</ul>

Below the list, there are corresponding div elements as follows:

<div id="firstdiv">Content Here</div>
<div id="seconddiv">Content Here</div>
<div id="thirddiv">Content Here</div>

I am investigating how I can display each div only upon hovering over its respective LI item, perhaps even incorporating a fadein effect. I have attempted various solutions found online, but unfortunately, none have been successful so far.

jquery css jquery-hover

Answer 1

Answer №1

Ensuring that each id is unique is crucial, so alternative methods of referencing your <div>s must be utilized. One suggestion is to make use of data-* attributes:

HTML

<ul>
    <li data-id="firstbox">First box</li>
    <li data-id="secondbox">Second box</li>
    <li data-id="thirddbox">Third box</li>
</ul>

Subsequently, your jQuery script could resemble the following example:

$('ul li').on({
    'mouseenter':function(){
        $('#'+$(this).data('id')).fadeIn();
    },'mouseleave':function(){
        $('#'+$(this).data('id')).fadeOut();
    }
});

Example Link

Answer 2

Ensuring that each id is unique is crucial, so alternative methods of referencing your <div>s must be utilized. One suggestion is to make use of data-* attributes:

HTML

<ul>
    <li data-id="firstbox">First box</li>
    <li data-id="secondbox">Second box</li>
    <li data-id="thirddbox">Third box</li>
</ul>

Subsequently, your jQuery script could resemble the following example:

$('ul li').on({
    'mouseenter':function(){
        $('#'+$(this).data('id')).fadeIn();
    },'mouseleave':function(){
        $('#'+$(this).data('id')).fadeOut();
    }
});

Example Link

Answer 3

Answer №2

Please refer to this particular fiddle.

It's important to ensure that the ID's remain unique.

Below is an excerpt of code extracted from the aforementioned fiddle:

$(document).ready(function() {
    $('ul>li').hover(function(){
        $('#d'+$(this).prop('id')).show();
    }, function() {
        $('#d'+$(this).prop('id')).hide();
    });
});

Answer 4

Please refer to this particular fiddle.

It's important to ensure that the ID's remain unique.

Below is an excerpt of code extracted from the aforementioned fiddle:

$(document).ready(function() {
    $('ul>li').hover(function(){
        $('#d'+$(this).prop('id')).show();
    }, function() {
        $('#d'+$(this).prop('id')).hide();
    });
});

Answer 5

Answer №3

Update your identifier to a class

<ul>
<li class="first-div">First div</li>
<li class="second-div">Second div</li>
<li class="third-div">Third div</li>
</ul>

<div class="first-div">Content 1 Here</div>
<div class="second-div">Content 2 Here</div>
<div class="third-div">Content 3 Here</div>

then you can implement:

$('ul li').hover(function() {
    var cls = $(this).attr('class');
    $('div.'+cls).toggle();
})

View Demo on Fiddle

Answer 6

Update your identifier to a class

<ul>
<li class="first-div">First div</li>
<li class="second-div">Second div</li>
<li class="third-div">Third div</li>
</ul>

<div class="first-div">Content 1 Here</div>
<div class="second-div">Content 2 Here</div>
<div class="third-div">Content 3 Here</div>

then you can implement:

$('ul li').hover(function() {
    var cls = $(this).attr('class');
    $('div.'+cls).toggle();
})

View Demo on Fiddle

Answer 7

Answer №4

Give this a try.

This is the HTML code:

<ul>
<li id="firstli">First item in list</li>
<li id="secondli">Second item in list</li>
<li id="thirdli">Third item in list</li>
</ul>

<div id="firstdiv">Content for first item here</div>
<div id="seconddiv">Content for second item here</div>
<div id="thirddiv">Content for third item here</div>

Here is the JavaScript code.

$(document).ready(function(){

 $("#firstdiv").hide();
 $("#seconddiv").hide();
 $("#thirddiv").hide();

    $("#firstli").hover(function(){
      $("#firstdiv").show();
    });
    $("#secondli").hover(function(){
      $("#seconddiv").show();
    });
    $("#thirdli").hover(function(){
      $("#thirddiv").show();
    });
});

Check out the output here: fiddle demo

Answer 8

Give this a try.

This is the HTML code:

<ul>
<li id="firstli">First item in list</li>
<li id="secondli">Second item in list</li>
<li id="thirdli">Third item in list</li>
</ul>

<div id="firstdiv">Content for first item here</div>
<div id="seconddiv">Content for second item here</div>
<div id="thirddiv">Content for third item here</div>

Here is the JavaScript code.

$(document).ready(function(){

 $("#firstdiv").hide();
 $("#seconddiv").hide();
 $("#thirddiv").hide();

    $("#firstli").hover(function(){
      $("#firstdiv").show();
    });
    $("#secondli").hover(function(){
      $("#seconddiv").show();
    });
    $("#thirdli").hover(function(){
      $("#thirddiv").show();
    });
});

Check out the output here: fiddle demo

Answer 9

Answer №5

It is important to assign unique identifiers to elements

<ul>
<li id="firstElement">First element</li>
<li id="secondElement">Second element</li>
<li id="thirdElement">Third element</li>

</ul>

<div class="myNewClass" id="firstElement1">ContentA Here</div>
<div class="myNewClass" id="secondElement1">ContentB Here</div>
<div class="myNewClass" id="thirdElement1">ContentC Here</div>

$(".myNewClass").hide();
$("ul li").hover(function(){
$(".myNewClass").hide();
$("#"+this.id+1).show();
});

See the Demo

Answer 10

It is important to assign unique identifiers to elements

<ul>
<li id="firstElement">First element</li>
<li id="secondElement">Second element</li>
<li id="thirdElement">Third element</li>

</ul>

<div class="myNewClass" id="firstElement1">ContentA Here</div>
<div class="myNewClass" id="secondElement1">ContentB Here</div>
<div class="myNewClass" id="thirdElement1">ContentC Here</div>

$(".myNewClass").hide();
$("ul li").hover(function(){
$(".myNewClass").hide();
$("#"+this.id+1).show();
});

See the Demo

Answer 11

Answer №6

Here is the solution you've been looking for

<html>
<head>
<style>
.hidden_div{
    display: none;
    position: absolute;
}
</style>
</head>
<body>

<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
</ul>

<div class="firstdiv hidden_div">Content 1</div>
<div class="seconddiv hidden_div">Content 2</div>
<div class="thirddiv hidden_div">Content 3</div>

<script src="script/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
    $("li").mouseover(function(){
        var id=$(this).attr('id');

        $('.hidden_div').fadeOut();
        $("."+id).fadeIn();
    })

});
</script>

</body>
</html>

You just need to adjust where your script is placed

Answer 12

Here is the solution you've been looking for

<html>
<head>
<style>
.hidden_div{
    display: none;
    position: absolute;
}
</style>
</head>
<body>

<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
</ul>

<div class="firstdiv hidden_div">Content 1</div>
<div class="seconddiv hidden_div">Content 2</div>
<div class="thirddiv hidden_div">Content 3</div>

<script src="script/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
    $("li").mouseover(function(){
        var id=$(this).attr('id');

        $('.hidden_div').fadeOut();
        $("."+id).fadeIn();
    })

});
</script>

</body>
</html>

You just need to adjust where your script is placed

Hover-over div's to switch them on

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Storing the DOM in a Variable

Leveraging JavaScript and Thymeleaf to manipulate a list

Failure to send data via Jquery AJAX to a different webpage

Does the height of the rendered font adjust based on the length of words in Japanese formatting?

What can I do to resolve the problem with td border

JQuery ajax event "on drag and drop" is not functioning as expected

Issue with the initial element in CSS and the cause remains a mystery

Using AngularJS with the Chosen Plugin to pre-select a value in a dropdown menu

Firefox not triggering image onload event

Ruby on Rails: Automatically redirecting to a new page

The precise moment for the formation as opposed to the choice of elements

Is there a way to identify the specific list item that a draggable element has been dropped onto within a jQuery sortable with connected draggable lists?

Switch the checked status of an input dynamically using jQuery function

Struggling to locate an element with jQuery's closest() method?

How can jQuery be used to adjust the width and height of an iframe?

Angular encountered an issue with an HTTP POST request, as the 'Access-Control-Allow-Origin' header was not found on the requested resource

Make JQuery send a POST request instead of OPTIONS when making a cross-domain call

What is the process for refreshing the vis.js function to clear or reset the selection of a node or edge?

How can text be concealed within an input field?

What is the best way to retrieve an ID within a loop and utilize a modal for editing and updating data with CodeIgniter 3 and jQuery