页面加载时的菜单边框和图像突出显示

Question

我正在尝试完成一个菜单，其中第一个链接在页面加载时以底部边框突出显示。 鼠标悬停在菜单中的每个链接上后都有一个图像。

现在我已经设法在页面加载时获得了边框底部的工作，但我也想显示第一个图像。我的jQuery技能非常有限，所以我认为编码总体上不是很整洁。

我还想在用户将鼠标悬停在某个项目上时使边框消失(淡出/过渡((现在当鼠标在其他地方时，最后一个悬停的项目仍然带有下划线(。

$(".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>

这是一个小提琴： https://jsfiddle.net/d7oj35wm/

Answer 1

您需要做的就是在$(document).ready()函数中添加以下代码，以加载第一个图像而不悬停。

您需要应用 CSS 样式才能正确定位图像。

// Load initial image
$("#" + $('.one').data('image-id')).stop(1, 1).show();