Response title
This is preview!
MouseEnter/MouseLeave - Can't get div to stay hidden while mouse is over element!
in Using jQuery
•
9 years ago
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');
- });
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!
1
