CODEWITHSUNDEEP
javascriptjqueryhtmlcss
hacks1ash
hacks1ash

Reputation: 37

Hover and click

I have 4 same div-s like this, when I hover over one of the link all the elements get the same code. Please help with my code.

        <div class="Person-team">
            <div class="profile-pic-d">
                <a class="profile-pic-a">
                    <img class="profile-picture" alt="profile picture" src="img/profile.jpg">
                </a>
            </div>
        </div>

I have css like this

.profile-picture {
height: 200px;
width: 200px;
border-radius: 100px;
}

.profile-picture.hover {
padding: 10px;
border: 6px solid #ffdd00;
}

.profile-picture.click {
padding: 10px;
border: 6px solid #ffdd00;
}

and the js here:

$(".profile-pic-a").hover(
    function() {
        $(".profile-picture").toggleClass('hover');
    }
);

$(".profile-pic-a").click(
    function() {
        $(".profile-picture").toggleClass('click');
    }
);

Upvotes: 0

Views: 160

Answers (2)

Kiran Mate
Kiran Mate

Reputation: 1

If you want different impact for each one use ID instead of class and ID's are unique so the properties will be applied to single only.

Upvotes: 0

acdcjunior
acdcjunior

Reputation: 135862

Try restricting the matched set:

$(".profile-pic-a").hover(
    function() {
        $(this).find(".profile-picture").toggleClass('hover');
    }
);

$(".profile-pic-a").click(
    function() {
        $(this).find(".profile-picture").toggleClass('click');
    }
);

The code $(this).find(".profile-picture").toggleClass('click'); toggles the class only on the .profile-picture that is a child of the hovered/clicked element.

$(".profile-pic-a").hover(
  function() {
    $(this).find(".profile-picture").toggleClass('hover');
  }
);

$(".profile-pic-a").click(
  function() {
    $(this).find(".profile-picture").toggleClass('click');
  }
);
.profile-picture {
  height: 200px;
  width: 200px;
  border-radius: 100px;
}

.profile-picture.hover {
  padding: 10px;
  border: 6px solid #ffdd00;
}

.profile-picture.click {
  padding: 10px;
  border: 6px solid #ffdd00;
  background: red; /* added for demo */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Person-team">
  <div class="profile-pic-d">
    <a class="profile-pic-a">
      <img class="profile-picture" alt="profile picture" src="img/profile.jpg">
    </a>
  </div>
</div>
<br><br><br><br>
<div class="Person-team">
  <div class="profile-pic-d">
    <a class="profile-pic-a">
      <img class="profile-picture" alt="profile picture" src="img/profile.jpg">
    </a>
  </div>
</div>


It is worth mentioning, as noted by @AndrewBone in the comments, that you can use :hover CSS pseudo-class instead of that code:

// the hover behavior can be replaced by `:hover` CSS pseudo-class

$(".profile-pic-a").click(
  function() {
    $(this).find(".profile-picture").toggleClass('click');
  }
);
.profile-picture {
  height: 200px;
  width: 200px;
  border-radius: 100px;
}

.profile-picture:hover { /* using :hover now */
  padding: 10px;
  border: 6px solid #ffdd00;
}

.profile-picture.click {
  padding: 10px;
  border: 6px solid #ffdd00;
  background: red; /* added for demo */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Person-team">
  <div class="profile-pic-d">
    <a class="profile-pic-a">
      <img class="profile-picture" alt="profile picture" src="img/profile.jpg">
    </a>
  </div>
</div>
<br><br><br><br>
<div class="Person-team">
  <div class="profile-pic-d">
    <a class="profile-pic-a">
      <img class="profile-picture" alt="profile picture" src="img/profile.jpg">
    </a>
  </div>
</div>

Upvotes: 1

Related Questions