CODEWITHSUNDEEP
javascriptjqueryhtmlhover
Rio Karim
Rio Karim

Reputation: 3

Hover sibling of a class and change child img source unique to that instance of class

I have the following HTML. Essentially 4 similarly styled boxes that are inline with eachother. When I hover each individual box, i'm trying to change the img src to the data-alt-src, only for the individual div thats being hovered.

I have the jQuery further below to do this. But it is very hard-coded, i'm wondering if there is a better way of doing this? Also with an ease-in-out of .4s would be a huge help as I already have the CSS doing this for the background color. The main source image is blue and the alt source is white.

<div class="skillsBox">
    <div class="skill_div">
        <div class="skill_img">
            <img src="css/house.png" data-alt-src="css/house2.png" alt="House"/>
        </div>
        <div class="skill_title">
            <h3>Repairs</h3>
        </div>
    </div>

    <div class="skill_div">
        <div class="skill_img">
            <img src="css/settings.png" data-alt-src="css/settings2.png" alt="Repair"/>
        </div>
        <div class="skill_title">
            <h3>Improvement</h3>
        </div>
    </div>

    <div class="skill_div">
        <div class="skill_img">
            <img src="css/shopping-cart.png" data-alt-src="css/shopping-cart2.png" alt="Cart"/>
        </div>
        <div class="skill_title">
            <h3>Affordable</h3>
        </div>
    </div>

    <div class="skill_div">
        <div class="skill_img">
            <img src="css/like.png" data-alt-src="css/like2.png" alt="Like"/>
        </div>

        <div class="skill_title">
            <h3>Satisfaction</h3>
        </div>
    </div>
</div>

Here is the jQuery:

$(".skill_div:nth-of-type(1)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(1) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource)
    });

$(".skill_div:nth-of-type(2)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(2) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource)
    });

$(".skill_div:nth-of-type(3)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(3) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource)
    });

$(".skill_div:nth-of-type(4)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(4) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    });

Thanks a bunch, I did try to research the answer but could not find with my particular key-words, if this has been done before I do apologise.

Upvotes: 0

Views: 146

Answers (2)

connexo
connexo

Reputation: 56754

You can simply assign an event handler to each .skill_div and access each specific one inside the handler function using $(this):

$(".skill_div").on('mouseenter mouseleave', 
  function () {
    var $this = $(this).find("img");
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource)
  }
);

A solution that does not even require Javascript would be this CSS approach:

<div class="skill_div">
    <div class="skill_img">
        <img src="css/settings.png" alt="Repair"/>
        <img src="css/settings2.png" alt="Repair"/>
    </div>
    <div class="skill_title">
        <h3>Improvement</h3>
    </div>
</div>
<style type="text/css">
  .skill_div img { transition-duration: .3s; }
  .skill_div img + img { opacity: 0; }
  .skill_div img:first-of-type { position: absolute; }
  .skill_div:hover img:first-of-type { opacity: 0; }
  .skill_div:hover img + img { opacity: 1; }
</style>

Upvotes: 0

Rio Karim
Rio Karim

Reputation: 3

Thanks for all the help in the comments. I have now made it much easier on the eyes with the following code:

  $(".skill_div").mouseenter(
   function () {
    var $this = $(this).find("img");
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource)
   }
  )

  $(".skill_div").mouseleave(
   function () {
   var $this = $(this).find("img");
   var newSource = $this.data('alt-src');
   $this.data('alt-src', $this.attr('src'));
   $this.attr('src', newSource)
  }
 )

Please feel free to add further if this can be better improved.

Upvotes: 0

Related Questions