CODEWITHSUNDEEP
javascriptjqueryhtmlhover
David Van Staden
David Van Staden

Reputation: 1779

Add hover function to a class if condition is met

I have 2 h3 elements inside a parent div with class 'entry'

<div class="entry">
  <h3 class="productsHover">
    <a><img src="image.png" /></a>
  </h3>
  <h3>
    <a>Drillrigs</a>
  </h3>
</div>

Now, when you hover over the image, it has a transition effect defined by the CSS:

h3.productsHover img{
    position: relative;
    margin-right: 10px !important;
    left: 0px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
h3.productsHover img:hover{
    left: 6px;
}

I do not want to add them into the same parent element(h3.productsHover) to which the hover effect is applied. They(the image and the text) should remain in separate h3 tags

QUESTION: So how do I call the hover effect on the image when in fact hovering over the h3 text element?

Not that I do not want to apply the hover effect over the entire parent element (.entry) since it contains many other image and h3 tags as well.

Also, classes should only be added via JS, and not in the html it self (the normal way).

Upvotes: 0

Views: 1362

Answers (3)

Henry Leu
Henry Leu

Reputation: 2274

bind handler to hover (jQuery supports) event on h3 which has a a text, the handler will add a class on mouseenter and remove a class on mouseout. let css class on h3 which has img to do the effect.

$( 'div.entry h3:last-child a' ).hover(
    function(e){ $(this).parent().prev().addClass('productsHover') },

    function(e){ $(this).parent().prev().removeClass('productsHover') }
);

Upvotes: 1

radu florescu
radu florescu

Reputation: 4353

@Vimal Stan: this answer should be improved with the following:

$(".entry img").prev().addClass("hoverClass"); // of fire hover for that element
// same with this one .entry:hover img

http://api.jquery.com/prev/

 .prev( [selector ] )Returns: jQuery

Description: Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

Upvotes: 1

Vimal Stan
Vimal Stan

Reputation: 2005

You could do it this way:

 .entry img
 .entry:hover img

This should let you display the hover effect no matter where the hovers over the div.

Upvotes: 0

Related Questions