如何使用jquery编写悬停

How to write hover using jquery?

本文关键字：悬停 jquery 何使用      更新时间：2023-09-26

如果将鼠标悬停在按钮标签上，它将显示带有空格的社交按钮。当我将鼠标悬停在两个社交图标之间的空间上时，follo.w 按钮会闪烁片刻，如果我甚至在图标之间移动，我们也不应该显示关注按钮。

<div class="visible-lg visible-md">
    <button class="btn follow-btn text-center" onmouseover="$(this).hide().next().show();">Follow Benedict on social media</button>
    <div class="social-btn text-center" onmouseout="$(this).hide().prev().show();">
        <a class="btn" href="https://twitter.com/BenedictEvans" target="_blank">
            <img src="/assets/new_home/influential-images/Icons/twitter.png" width="100%" height="100%"/>
        </a>
        <a class="btn" href="http://ben-evans.com/" target="_blank">
            <img src="/assets/new_home/influential-images/Icons/blog.png" width="100%" height="100%"/>
        </a>
        <a class="btn" href="https://soundcloud.com/a16z" target="_blank">
            <img src="/assets/new_home/influential-images/Icons/soundcloud.png" width="100%" height="100%"/>
        </a>
        <a class="btn" href="http://www.slideshare.net/bge20" target="_blank">
            <img src="/assets/new_home/influential-images/Icons/slideshare.png" width="100%" height="100%"/>
        </a>
        <a class="btn" href="https://www.linkedin.com/in/benedictevans" target="_blank">
            <img src="/assets/new_home/influential-images/Icons/linkedin.png" width="100%" height="100%"/>
        </a>
    </div>
</div>

在这里添加了小提琴： http://jsfiddle.net/thangadurai1992/g9rasopd/

你总是可以使用CSS。它通过使用包装器div 并在父级上具有悬停效果来工作。

img {
  height: 30px;
  margin: 20px;
}
button {
  height: 30px;
  margin-top: 20px;
  width: 100%;
  position: absolute;
}
.wrapper:hover button {
  display: none;
}
.wrapper {
  display: inline-block;
  position: relative;
}
<div class="wrapper">
  <button>Follow Text Here</button>
  <img src="http://placekitten.com/g/300/200" />
  <img src="http://placekitten.com/g/300/200" />
  <img src="http://placekitten.com/g/300/200" />
  <img src="http://placekitten.com/g/300/200" />
</div>

注意：按钮和图像标签上使用的边距仅用于演示，可以在不破坏功能的情况下删除。

我已经将 css（以保持干净）直接放在 img 和按钮标签上。为了确保它仅适用于此按钮/这些图像，您可以通过类选择它们：

.social {
  height: 30px;
  margin:5px;
}
.follow {
  height: 30px;
  width: 100%;
  margin-top:5px;
  position: absolute;
}
.wrapper:hover .follow {
  display: none;
}
.wrapper {
  display: inline-block;
  position: relative;
}
<div class="wrapper">
  <button class="follow">Follow Benedict on social media</button>
  <img class="social" src="/assets/new_home/influential-images/Icons/twitter.png" />
  <img class="social"  src="/assets/new_home/influential-images/Icons/blog.png" />
  <img class="social"  src="/assets/new_home/influential-images/Icons/soundcloud.png" />
  <img class="social"  src="/assets/new_home/influential-images/Icons/slideshare.png" />
  <img class="social"  src="/assets/new_home/influential-images/Icons/linkedin.png" />
</div>

你不需要

JS。

我刚刚添加了一个容器并设置了一个悬停。

http://jsfiddle.net/g9rasopd/6/

.social-btn-container:hover .follow-btn{
    display: none;
}
.social-btn-container:hover .social-btn{
    display: inline-block;
}
相关文章：