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

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();