Показать сообщение отдельно
  #11 (permalink)  
Старый 10.05.2018, 16:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

Lord_Jesus_,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .img {
      width: 300px;
      height: 200px;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url(http://img.funtema.ru/10112015/les/5.jpg);
      transition: .8s;
  }
  .img img{
      opacity: 0;
      width: 100%;
      height: 100%;
      transition: opacity .8s;
  }
  .img.show img{
      opacity: 1;
  }
  nav a{
      font-size: 42px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  var src = ["https://tvoidvor.com/wp-content/uploads/TelegramDesktop-min.jpg", "https://poster.nicefon.ru/2016_06/13/800x450/33349860e2e2ea69df6fc.jpg"];
  var div = $(".img");
  var img = $("img", div)[0];
  $("nav a").each(function(i, el) {
    $(el).mouseleave(function() {
      div.removeClass("show");
    }).mouseenter(function() {
      img.src = src[i];
      div.addClass("show");
     });
  });
});
  </script>
</head>

<body>
<nav>
    <a href="ссылка.php">текст</a>
    <a href="ссылка2.php">текст2</a>
</nav>
<div class="img">
  <img>
</div>
</body>
</html>
Ответить с цитированием