Question

如果将鼠标悬停在按钮标记上，则会显示带有空格的社交按钮。当我在两个社交图标之间的空间中鼠标悬停时，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/

Answer 1

你可以随时使用css。它的工作原理是使用包装器div并在父节点上具有悬停效果。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

你不需要JS。

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

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

.social-btn-container:hover .follow-btn{
    display: none;
}

.social-btn-container:hover .social-btn{
    display: inline-block;
}

如何用jquery写hover？

2 个答案: