Hover on getElementById using javascript

Total Post:134


 2471  View(s)
Rate this:

I hope someone can answer my question, it is probably easy for you but I am not very used to JavaScript.

So I made a menu using this code:

function tabSwitch(new_tab, new_content) { 
    document.getElementById('content_1').style.display = 'none'; 
    document.getElementById('content_2').style.display = 'none'; 
    document.getElementById('content_3').style.display = 'none';         
    document.getElementById(new_content).style.display = 'block';    
    document.getElementById('tab_1').className = ''; 
    document.getElementById('tab_2').className = ''; 
    document.getElementById('tab_3').className = '';         
    document.getElementById(new_tab).className = 'active';     

When clicking on the area of tab_1 the content_1 is displayed and so on. But I would like to get the content displayed when the mouse hovers over the area of the different tabs. Could you please help me, I looked up the web but I could not find anything, maybe because I have actually no idea of JavaScript.

So, thanks for your time and help.

  1. Re: Hover on getElementById using javascript


    You could go for the onmouseover event, as it is supported for a and li tags as well, and additionally check out the onmouseout (very similar) to be aware of both.

    With this, the li tags for the menu elements would look like:

    <li onmouseover="tabSwitch('tab_1', 'content_1');"><a href="#" id="tab_1" class="active"><img src="img/flash.png" /></a></li>
    <li onmouseover="tabSwitch('tab_2', 'content_2');"><a href="#" id="tab_2"><img src="img/brush.png" /></a></li>

    Onmouseover will fire, when you hover over the element. I think you get the idea from here.

      Modified On Mar-30-2018 11:55:18 PM


Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.