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

Question

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>
<i style="color:white;font-size:25px;" class="far fa-envelope"></i>
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:
Hovering on Whatsapp:
All elements are being affected, but I want only the element being hovered to be affected.

Answer 1

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>

Answer 2

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.