Question

I am trying to hide a <p> element when a link is hovered. The site is running on drupal and I am using a superfish module for the nav bar. When I hover over the navigational links the secondary nav bar drops down.

What I would like to happen is when the secondary nav bar drops down for the slogan of the website to disappear. In other words I would like the secondary nav bar to cover up or take the place of the slogan. Any ideas on how to get this to work?

Answer 1

You could use JavaScript, something like this:

<a href="#" id="hoverthis" onmouseover='document.getElementById("disappear").style.display="none";'>When you over this, the second div with disappear.</a>

<p id="disappear">I will disappear when hoverthis is hovered.</p>

The script above sets the element (in this case, the p) to make apply the CSS code display:none to the div with the id disappear. You could set JavaScript to apply any CSS property to wanted, virtually. Like you could use JavaScript to make the div reappear. This could also be accomplished with jQuery, like this:

$('#disappear').hide();

or to remove from the DOM:

$('#disappear').remove();

or to make it reappear:

$('#disappear').show();

This is shorthand. You could also set jQuery to do something like this:

$('#disappear').css("display","none");

And with the code above, like the pure JavaScript solution, could be edited to apply any CSS property.

You can edit this script to suit your needs. Tell me if this works, or if you need further help.

If this helps you, remember to click the check near this answer. It would really help. Thanks. 🙂