How can I make objects appear while hovering on a certain object?

[Denis Kushnir]

Hi, I need to create a menu where objects such as text and lines will appear while hovering over certain graphic elements. How can I do that?

[Falko]

With CSS you can achieve that if you nest elements, but it's probably not what you want. 

Therefore you might need some JS code like (add this to the hackershell)

$('#view').on('hover', '.wp-hovertrigger', // bind to all objects, including objects loaded in the future
function(){ // hover start
 $('.wp-hovertarget').fadeIn();
},
function(){ // hover stop
 $('.wp-hovertarget').fadeOut();
});

Then you go click on the element that should trigger the effect and add the style class "hovertrigger" (not need to add anything to the style, just needs the class) and next click on the element that should appear/disappear and add the style class "hovertarget" (if you want it to be hidden initially add the style "display: none")

I have not tested the code, so when you tried it out and it does not work show me the example and I will correct it.

if you have several triggers/targets use "...trigger1" "...target1" etc.

[Tamara C]

This effect and tutorial was successful! I will add 2 comments:

• When you want to use the - display: none - so the target is hidden initially, you should copy it INTO the html of "this element" style for the particular element OR to the style we just created "hovertarget" and NOT as a new style.
• When you copy the names make sure to only copy the names without the " " and don't forget to add the symbol ; after you copied paste the "display: none" to the HTML style window.

[Tamara C]

OK, so it didn't work, there was some adjustments, here is the correct code:

$('#view').on('mouseenter', '.wp-hovertrigger', // bind to all objects, including objects loaded in the future

function(){ // hover start
 $('.wp-hovertarget').fadeIn();

});
$('#view').on('mouseleave', '.wp-hovertrigger',