CODEWITHSUNDEEP
javascriptjqueryhtml
James5949
James5949

Reputation: 147

jQuery hover effect based on parent attribute value

I written some code that changes an image and fades the opacity when and image is hovered over - giving the hovered effect.

I am now trying to modify the code so if the hovered image's parent div has a value attribute of "added", the hover affect won't trigger on that image.

How do I stop the hovered effect on images, with parents that have a value attribute of "added"?

This is what my HTML looks like:

Hover disabled, value attribute is "added".

<button class="add_list_button" value="added"><img class="test" src="/assets/heart-empty.png"/></button>

Hover enabled, no value attribute:

<button class="add_list_button" value=""><img class="test" src="/assets/heart-empty.png"/></button>

This is what my jQuery looks like:

$( document ).ajaxComplete(function() {
    var value = $('.add_list_button').val();
    var img = $(".add_list_button").children('img');
   $(img).hover(function(){
   $(this).attr('src','assets/heart-full.png').animate({opacity: 0.7}, 400);
   },function(){
    $(this).attr('src','assets/heart-empty.png').animate({opacity: 1}, 400);
  });
});

Upvotes: 1

Views: 192

Answers (2)

Pati
Pati

Reputation: 524

you can use css3 selector for that purpose. Instead of:

var img = $(".add_list_button").children('img');

use

var img = $(".add_list_button:not([value='added'])").children('img');

your whole code will be:

$( document ).ajaxComplete(function() {
    var value = $('.add_list_button').val();
   var img = $(".add_list_button:not([value='added'])").children('img');
   $(img).hover(function(){
   $(this).attr('src','assets/heart-full.png').animate({opacity: 0.7}, 400);
   },function(){
    $(this).attr('src','assets/heart-empty.png').animate({opacity: 1}, 400);
  });
});

I think you can simplify this code. It can be like this:

$( document ).ajaxComplete(function() {
   $(".add_list_button:not([value='added']) img").hover(function(){
       $(this).attr('src','assets/heart-full.png').animate({opacity: 0.7}, 400);
       },function(){
       $(this).attr('src','assets/heart-empty.png').animate({opacity: 1}, 400);
    });
});

EDIT: added click event

$( document ).ajaxComplete(function() {
   $(".add_list_button:not([value='added']) img")
   .hover(function(){
         $(this)
           .attr('src','assets/heart-full.png')
           .animate({opacity: 0.7}, 400);
       },function(){
         $(this)
           .attr('src','assets/heart-empty.png')
           .animate({opacity: 1}, 400);
       }
    )
    .click(function(){
       $(this)
           .unbind('mouseenter mouseleave click')
           .animate({opacity: 1}, 400)
           .attr('src','assets/heart-full.png')
       .parents('.add_list_button').val('added')
       ;
    });
});

Upvotes: 0

Ercan Peker
Ercan Peker

Reputation: 1662

you don't need jQuery, you can do by css attribute selector. 

.add_list_button img:hover {
  border:1px solid red;
}

.add_list_button[value="added"] img:hover {
  border:0 solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add_list_button" ><img class="test" src="https://via.placeholder.com/350x150?text=Not added"/></button>
<div>
<br/>
</div>
<button class="add_list_button" value="added"><img class="test" src="https://via.placeholder.com/350x150?text=added"/></button>

Upvotes: 1

Related Questions