Bharat Negi Bharat Negi - 2 months ago 6
CSS Question

Find css class after parent div

there is any jquery which is find class after parent div, I am using class "trapezoid-two" and make jquery code but that create issue, so can any one tel me how to find css after parent div class('ban-menu1').

HTML:-

<div class="col-md-2 nopadding">
<div class="ban-menu1"></div>
<svg class="trapezoid-two" viewbox="0 0 100 100" preserveAspectRatio="none" width="100%">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="images/shade-two.jpg" x="0" y="0" width="110" height="100" />
</pattern>
</defs>
<path d="M0,0 L100,23 L100,77 L0,100z" fill="url(#img1)"></path>
</svg>
</div>


Jquery

$(document).ready(function(){
$( ".trapezoid-two" ).hover(
function() {
$(this).find('path').attr('d','M0,0 L100,0 L100,100 L0,100z');
$(this).parent().addClass('img-scale');
}, function() {
$(this).find('path').attr('d','M0,0 L100,23 L100,80 L0,100z');
$(this).parent().removeClass('img-scale');
}
);
});

Answer

ban-menu1 is a sibling of .trapezoid-two use prev() to help you add a class to it

$(document).ready(function(){
// svg path change  
$( ".trapezoid-two" ).hover(
  function() {
    $(this).find('path').attr('d','M0,0 L100,0 L100,100 L0,100z');
    $(this).prev().addClass('img-scale');     
  }, function() {
    $(this).find('path').attr('d','M0,0 L100,23 L100,80 L0,100z');
    $(this).prev().removeClass('img-scale');
  }
);

see demo : https://jsfiddle.net/cgvbt80q/