Currently, I am working on creating a unique menu design where the initial link is highlighted with a border-bottom when the page loads. Additionally, there is an image that follows the mouse when hovering over each link in the menu.
Although I have successfully implemented the border-bottom effect on page load, I would like to display the initial image as well. My jQuery skills are limited, so the code may not be very organized.
Furthermore, I aim to make the border disappear (fade out/transition) after a user hovers over an item. Currently, the last hovered item remains underlined even when the mouse is elsewhere.
$(".menu li a").hover(function() {
$('.menu li a').removeClass('one');
$(this).addClass('one');
});
$(document).ready(function() {
$('.one').mousemove(function(e) {
$img = $("#" + $(this).data('image-id'))
$img.stop(1, 1).show();
$img.offset({
top: e.pageY - 150,
left: e.pageX + 100
});
}).mouseleave(function() {
$img = $("#" + $(this).data('image-id'))
$img.hide();
});
});
$(document).ready(function() {
$('.two').mousemove(function(e) {
$img = $("#" + $(this).data('image-id'))
$img.stop(1, 1).show();
$img.offset({
top: e.pageY - 150,
left: e.pageX + 100
});
}).mouseleave(function() {
$img = $("#" + $(this).data('image-id'))
$img.hide();
});
});
$(document).ready(function() {
$('.three').mousemove(function(e) {
$img = $("#" + $(this).data('image-id'))
$img.stop(1, 1).show();
$img.offset({
top: e.pageY - 150,
left: e.pageX + 100
});
}).mouseleave(function() {
$img = $("#" + $(this).data('image-id'))
$img.hide();
});
});* {
margin-top: 80px;
margin-left: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 0;
margin: 0;
}
ul.menu a {
color: black;
text-decoration: none;
font-family: sans-serif;
transition: all 0.3s ease;
}
.one {
color: black;
border-bottom: 3px solid lightgreen;
}
img.mouse-hovered {
display: none;
position: absolute;
width: 300px;
height: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="menu">
<li>
<img id="img-one" src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="mouse-hovered">
<a href="#" class="one" data-image-id="img-one">One</a>
</li>
<li>
<img id="img-two" src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="mouse-hovered">
<a href="#" class="two" data-image-id="img-two">Two</a>
</li>
<li>
<img id="img-three" src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="mouse-hovered">
<a href="#" class="three" data-image-id="img-three">Three</a>
</li>
</ul>To view the live example, visit this fiddle: https://jsfiddle.net/d7oj35wm/