My design involves two "layers". On the first layer, I have a circle, with some links in the middle. This is just a div with a background image, and some text in the center. Then I have another circle, same size and shape, on top of the first one, covering it up. This circle just has a one or two word title on it. When a user hovers over the title with their mouse, I want that div to disappear, showing the links underneath it. When you mouse out, the circle with the title should show back up.
Here is the basic HTML:
- <div class="circle">
- <div class="circletitle">
- <h2>Title of Circle</h2>
- </div>
-
- <a href="">Links</a><br />
- <a href="">Websites</a><br />
- <a href="">Blogs</a><br />
- <a href="">Books</a>
- </div>
Here is the jQuery:
- $('.circletitle').mouseenter(function () {
- $(this).fadeOut('fast');
- }).mouseleave(function () {
- $(this).fadeIn('fast');
- });
So what happens, is if you mouse over, the circle fades away just fine. But if you move your mouse at all again, even the slightest bit, the event is triggered again. So the title fades in and then out again real quick. Even if you actually mouse completely out of the CircleTitle div, it still triggers one last time instead of just fading in.
Because mouseenter keeps track of the mouse being over that element, and then that div disappears, it's probably causing some problems. But I don't know any other way to get this to work! If someone has some ideas, I'd really appreciate the help, this is an important project!