Question

我似乎无法找到一个在线工作的解决方案，所以我想我会问这里。因此，当我将鼠标悬停在其上时，我想让我的页面菜单显示我的徽标。我不介意使用javascript或只是简单的HTML和CSS。任何帮助将不胜感激。

<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="refrences.html">Refrences</a></li>

Answer 1

没有你的代码，我无法给你一个具体的答案，但你可以使用CSS选择器：hover 很容易地做到这一点。你可以在这里看到这个小提琴是如何工作的： https://jsfiddle.net/8xxtLega/1/

＆＃xA;＆＃xA;

如果您不想占用图像，则可以使用display属性而不是opacity来隐藏图像。像这样：

＆＃xA;＆＃xA;

  img {＆＃xA; display：none;＆＃xA;}＆＃xA;＆＃xA; div：hover img {＆＃xA; display：block;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

此实例中的div可以是整个菜单或其他类型的容器。当您将鼠标悬停在菜单上时，这将实现您想要显示图像的方法。

＆＃xA;＆＃xA;

我建议您使用不透明度或 display：hidden; < / code>而不是 display：none; ，以便在图像出现时不会改变您的布局。

＆＃xA;

Answer 2

这是一个使用JQuery在悬停时用徽标图像替换菜单链接的示例解决方案，当鼠标离开图像时，链接被替换。我确信有更好的方法，但在阅读完最后的评论和编辑后，这是一个快速的想法。希望有所帮助。

// Requires JQuery
$(document).ready(function() {   
   $('#home').hover(
      function () {
        $('#home').html('<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" style="width:30px; height:20px;">');
      }, 
      function () {
        $('#home').html('<a href="index.html">Home</a>');
      }
    );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>

li {
    display: inline;
    padding: 30px;
}


</style>
</head>
<body>
<div>
<ul>
  <li id="home"><a href="index.html">Home</a></li>
  <li><a href="contact.html">Contact</a></li> 
  <li><a href="refrences.html">Refrences</a></li> 
</ul>
</div>


</body>
</html>

如何在悬停时将html文本更改为徽标

2 个答案: