CODEWITHSUNDEEP
htmljquerycss
Miguel Cardona Polo
Miguel Cardona Polo

Reputation: 182

JQuery mouseenter affecting group of elements instead of $(this) element

I have a group of elements which on hover, I want to increase the padding of that element and not the group of elements.

This is the HTML of the page.

<div id="share-article-container">
    <div id="share-article">
    <?php include('share_article_content.php');?>    
    </div>
    <div id="share-bubbles">
        <div id="link-bubble" style="margin-top:55px" class="bubble"><span style="position: absolute;margin-left:5px;text-align:center;font-size:20px;">Copiar enlace</span></div>
    </div>
</div>

This is the file share_article_content.php

<a style="background:#25D366" target="_blank" href="https://wa.me/?text=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'])?>"><img style="height:25px" src="images/whatsapp_icons/WhatsApp_Logo_2.png"></a>
<a onclick="copyToClipboard()" id="share-article-link"><i style="color:white;font-size:25px;" class="fas fa-link"></i></a>
<a style="background:#1778f2" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'])?>" target="_blank"><img style="height:25px;" src="images/facebook_icons/logo.png"></a>
<a target="_blank" href="https://twitter.com/intent/tweet?url=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'])?>"><img style="height:25px;" src="images/twitter_icons/twitter-xxl.png"></a>
<a href = "mailto:[email protected]?subject=<?php echo ucwords($title)?>&body=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'])?>" style="background:red;"><i style="color:white;font-size:25px;" class="far fa-envelope"></i></a>

This is the CSS for these elements:

#share-article a{
   display: block;
   text-align: center;
   padding: 10px;
   padding-bottom: 5px;
   transition: 0.5s;
}

And this is the JQuery I'm using to solve this:

$("#share-article").on("mouseenter", "a", function(){
    $(this).css("width", "70px");
});

$("#share-article").on("mouseleave","a", function(){
    $(this).css("width", "50px");
});

When I attempt this with the shown code this is what happens:

Not on hover:

enter image description here

Hovering on Whatsapp:

enter image description here

All elements are being affected, but I want only the element being hovered to be affected.

Upvotes: 1

Views: 34

Answers (2)

Miguel Cardona Polo
Miguel Cardona Polo

Reputation: 182

I was changing the width of the a element without having an initial width.

#share-article a{
   display: block;
   text-align: center;
   padding: 10px;
   padding-bottom: 5px;
   transition: 0.5s;
   width: 50px
}

The problem was not having the width set in the first place. Once it was added the JQuery worked fine.

Upvotes: 0

Swati
Swati

Reputation: 28522

You can simply use a img selector without $() .

Demo Code :

$("#share-article").on("mouseenter", "img", function() {
  $(this).css("width", "70px");
});

$("#share-article").on("mouseleave", "img", function() {
  $(this).css("width", "50px");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="share-article-container">
  <div id="share-article">
    <div>
      <a style="background:#25D366" target="_blank" href=""><img style="height:50px" src="https://i.pinimg.com/originals/25/07/28/2507288cc5191483075bc6aba6771aa3.jpg"></a>
    </div>
    <div>
      <a style="background:#25D366" target="_blank" href=""><img style="height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOah0u5VksX76TPAhx-0HUHurBXuDkhAndAw&usqp=CAU"></a>
    </div>
  </div>
  <div id="share-bubbles">
    <div id="link-bubble" style="margin-top:55px" class="bubble"><span style="position: absolute;margin-left:5px;text-align:center;font-size:20px;">Copiar enlace</span></div>
  </div>
</div>

Upvotes: 1

Related Questions