时间戳

首页 > 解决方案 > JQuery mouseenter 影响元素组而不是 $(this) 元素

html - JQuery mouseenter 影响元素组而不是 $(this) 元素

问题描述

我有一组悬停时的元素，我想增加该元素的填充而不是元素组。

这是页面的 HTML。

<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>

这是文件 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:abc@example.com?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>

这是这些元素的 CSS：

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

这是我用来解决这个问题的 JQuery：

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

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

当我使用显示的代码尝试此操作时，会发生以下情况：

不悬停：

在此处输入图像描述

悬停在 Whatsapp 上：

在此处输入图像描述

所有元素都受到影响，但我只希望被悬停的元素受到影响。

标签： htmljquerycss

解决方案

您可以简单地使用a img选择器而不使用$().

演示代码：

$("#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>

推荐阅读