Граница меню и подсветка изображения при загрузке страницы - PullRequest
Новая
       4

Граница меню и подсветка изображения при загрузке страницы

0 голосов
/ 02 февраля 2020

Я пытаюсь выполнить sh меню, в котором первая ссылка выделяется с рамкой внизу при загрузке страницы. На каждой ссылке в меню после мыши при наведении курсора появляется изображение.

Теперь мне удалось получить работу по границе при загрузке страницы, но я бы хотел, чтобы первое изображение отображалось как хорошо. Мои 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/

1 Ответ

0 голосов
/ 03 февраля 2020

Все, что вам нужно сделать, это добавить следующий код в функцию $(document).ready(), чтобы загрузить первое изображение без наведения.

Вам потребуется применить стиль CSS, чтобы правильно расположить изображение. 

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