Menu
I am having issues with this: I want to force a hover function over the image when infact hovering over the h3 element
html:
<p><a><img class="size-full wp-image-1236 alignleft" alt="phone-icon-red" src="..." width="50" height="50" /></a></p>
<h3>Contact Us</h3>
CSS:
img:hover{
margin-left: 10px;
}
js:
$('h3').hover(function(e){
e.preventDefault();
$(this).prev('p').find('img').trigger('mouseover');
});
See my fiddle
922
Approach: This task can be accomplished by adding one element inside the other element & accordingly declaring the required CSS properties for the parent-child elements, so that whenever hovering outside the element then automatically the property of the inner element will change.
That's using the general sibling combinator ( ~ ). If #b is a descendant of #a , you can simply use #a:hover #b . ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second.
If an element is transparent and the element with z-index:-1; is 'under' it. This stops the hover effects. Z-index can you see as elevations in a building, and you watching it from birdseye. You can't reach the basement if there is a floor above it, even if its build from glass.
I have workaround for your issue.
Add img class same as hover pseudo class:
img:hover, img.hover{
margin-left: 10px;
}
Bind mouseover and mouseout events to h3 element:
$('h3').on({
'mouseover': function() {
$(this).prev('p').find('img').addClass('hover');
},
'mouseout': function() {
$(this).prev('p').find('img').removeClass('hover');
}
});
fiddle
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
