Question

我不是开发人员，但我需要在我的网站上添加图像。如果你将鼠标悬停在文本上，我想要更改图像。

是否有可用于wp或简单方法的插件？

Answer 1

编辑：抱歉，第一次看不到您的屏幕截图

您需要jQuery悬停才能执行此操作：

$('li').hover(function(){
  $('.image').attr('src', $(this).data('img'));
});

img {
  max-width: 200px;
}

ul {
  position: absolute;
  right: 50px;
  top: 0;
  list-style: none;
}

li {
  padding: 20px;
  cursor: pointer;
  background: blue;
  color: white;
  margin: 10px;
}

li:hover {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="image" src="https://sd-cdn.fr/wp-content/uploads/2016/02/simpsons-live.jpg">



<ul>
  <li data-img="https://sd-cdn.fr/wp-content/uploads/2016/02/simpsons-live.jpg">Img1</li>
  <li data-img="https://vignette.wikia.nocookie.net/simpsons/images/6/63/The_Simpsons_Simpsons_FamilyPicture.png/revision/latest?cb=20101023180303">Img2</li>
  <li data-img="http://www.premiere.fr/sites/default/files/styles/premiere_article/public/thumbnails/image/simpson_horror_show.jpg">Img2</li>
</ul>

https://www.w3schools.com/jquery/event_hover.asp

悬停文本更改图像wordpress

1 个答案: