CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Raja
Raja

Reputation: 305

Hover all child elements with Jquery

Hey guys i have a div that contains an image and a <figure> with a <figcaption>. I want it so when someone mouses over the box it fires all of the hover effects. any ideas? here is how i do my hover effects.

the HTML: 

    <a href="http://support.jonar.com/support/default.asp?W2294">
    <div class="box1">
        <figure>
            <img class="jlogo" src=
            "http://www.jonar.com/portal/partner/img/jonar_logo_white.png">
            <figcaption>
                Jonar &amp; You
            </figcaption>
        </figure>
    </div>
</a>

THE CSS:

css effect for box1 hover

 .box1:hover {
    opacity: 0.9;
    background: -webkit-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: -o-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: -moz-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
}

Jquery hover effect to change logo to colored logo 

$(".jlogo").on({
 "mouseover" : function() {
    this.src = 'http://www.jonar.com/portal/partner/img/jonar_logo_color.png';
  },
  "mouseout" : function() {
    this.src='http://www.jonar.com/portal/partner/img/jonar_logo_white.png';
  }
});

I guess i want when someone mouses over the box1 it fires even the logo change jquery.

Upvotes: 0

Views: 1560

Answers (4)

melvas
melvas

Reputation: 2356

As for me it will be more elegant to do only with CSS:

HTML

    <a href="http://support.jonar.com/support/default.asp?W2294">
     <div class="box1">
      <figure>
        <div class="jlogo"></div>
        <figcaption>
            Jonar &amp; You
        </figcaption>
      </figure>
     </div>
    </a>

CSS

 .box1:hover {
    opacity: 0.9;
    background: -webkit-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: -o-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: -moz-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
 }

 .box1 .jlogo{
    width:80px;
    height: 64px;
    background-image: url("http://www.jonar.com/portal/partner/img/jonar_logo_white.png");
 }

 .box1:hover .jlogo{
    background-image: url("http://www.jonar.com/portal/partner/img/jonar_logo_color.png");
 }

JSFIDDLE

Upvotes: 0

Anders
Anders

Reputation: 8577

To change the logo when the box is hovered, use the mouse events of the box and not the logo. It can be done like this:

$(".box1").on({
  "mouseover" : function() {
    $(this).find(".jlogo").attr("src", "jonar_logo_color.png");
  },
  "mouseout" : function() {
    $this("this").find(".jlogo").attr("src", "jonar_logo_white.png");
  }
});

The $this("this").find(".jlogo") finds any element with the class jlogo that is a descendant of the element that was hovered.

Alternativly, you might be able to accomplish this effect using only CSS (which in my opinion is preferable). Replace the image with an empty div with the same class, and then use this CSS:

.jlogo {
    width: 100px; /* Width of image */
    height: 100px; /* Height of image */
    background-repeat: no-repeat;
    background-image: src("jonar_logo_color.png");
}

/* When the box is hovered. */
.box1:hover .jlogo {
    background-image: src("jonar_logo_white.png");
}

In case the image you used was inline, you might want to add display: inline; to get the div to behave in the same way. Also, if you want to avoid having an extra div just for the image, you could use it as a background image for the figcaption instead, and use padding-left to avoid the text covering it.

I shortened the URL of the images for readability. You should avoid using absolute paths anyway, since a change of webadress would brake your code.

Upvotes: 1

Miguel
Miguel

Reputation: 20633

var $logo =  $(".jlogo");

$('.box1').on({
    'mouseover': function () {
       $logo.attr('src', 'http://www.jonar.com/portal/partner/img/jonar_logo_color.png');
    },
     'mouseout': function () {
       $logo.attr('src', 'http://www.jonar.com/portal/partner/img/jonar_logo_white.png');
    }
});

http://jsfiddle.net/yeqzp6kw/

Upvotes: 0

epascarello
epascarello

Reputation: 207491

As I said in the comments you can easily just change the code to use a background image and not need to use JavaScript at all.

But if you want to stick with your html code you have, why trigger events? Just change the code to listen for the mouse events on the box element.

$(".box1").on({
 "mouseenter" : function() {
    $(this).find(".jlogo").attr("src", 'http://www.jonar.com/portal/partner/img/jonar_logo_color.png');
  },
  "mouseleave" : function() {
    $(this).find(".jlogo").attr("src",'http://www.jonar.com/portal/partner/img/jonar_logo_white.png');
  }
});

Upvotes: 0

Related Questions