How to write hover using jquery?

Question

if hover on the button tag, it 'll show the social buttons with spaces. When I mouse over in the space between two social icons, the follo.w button flickers for a moment We should not show follow button if I move even in between icons.

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

Added the fiddle here: http://jsfiddle.net/thangadurai1992/g9rasopd/

Can you complete the adress for your images in your example? At the moment they are referring to your local computer. — Reporter
– Reporter, Commented Jan 27, 2015 at 10:42
You should use onmouseleave which bubbles unlike onmouseout. But using inline script as you do makes your code 'kind of' unreadable... jsfiddle.net/g9rasopd/5 — A. Wolff
– A. Wolff, Commented Jan 27, 2015 at 10:46

jbutler483 · Accepted Answer · 2015-01-27 11:03:52Z

you could always use css for this. It works by using a wrapper div and having the hover effect on the parent.

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>

Note: The margin used on the button and image tags are for demo only, and can be removed without breaking the functionality.

I have placed the css (to keep it clean) directly onto the img and button tags. In order for you to ensure it only applies to this button / these images, you could select them via class:

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

tomtomtom · Accepted Answer · 2015-01-27 10:54:41Z

0

You don't need JS on this one.

I just added a container and set an hover.

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

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

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

answered Jan 27, 2015 at 10:54

tomtomtom

9191 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to write hover using jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related