如何创建一个导航标题，当您将鼠标悬停在上面时会出现一个星号答案

【问题标题】：How to create a nav header that has a star appear when you hover over如何创建一个导航标题，当您将鼠标悬停在上面时会出现一个星号
【发布时间】：2020-11-19 23:13:23
【问题描述】：

我正在为我的网站创建导航栏，并且我想制作悬停状态，因此当您将鼠标悬停在家庭、工作或联系人标签上时，会出现一个星号。这可以通过代码添加还是我需要将此文本转换为图像才能这样做。查看我在 XD 中创建的图像。

navigation with star hover

plan navigation with out star hover

【问题讨论】：

标签： html css hover

【解决方案1】：

是的，您可以使用这样的 CSS 轻松做到这一点：

.star {
  visibility: hidden;
}
.items:hover .star{
  visibility: visible;
}

&lt;div class="items"&gt;&lt;span class="star"&gt;&amp;#9733;&lt;/span&gt;hello world&lt;/div&gt;

这是一个使用图像的示例。

.star {
  visibility: hidden;
  max-width: 20px;
  max-height: 20px;
}
.items:hover .star{
  visibility: visible;
}

<div class="items">
<img Class="star" src="https://www.mariowiki.com/images/thumb/8/8a/New_Super_Mario_Bros._U_Deluxe_Super_Star.png/1200px-New_Super_Mario_Bros._U_Deluxe_Super_Star.png"/>hello world</div>

【讨论】：

哇，谢谢！你知道我是否可以像示例中那样制作自定义星形/图像吗？
@erin 是的，您可以将 <span class="star">&#9733;</span> 替换为 <img class="star" src="https://myimage.com"/>
@erin 我已经编辑了我的答案以显示带有图像的示例。

【解决方案2】：

elementInQuestion.addEventListener("mouseenter",function(event){
  elementInQuestion.innerHTML = "☆" + elementInQuestion.innerHTML;
}, false);
elementInQuestion.addEventListener("mouseleave",function(event){
  elementInQuestion.innerHTML = elementInQuestion.innerHTML.slice(1);
}, false);

只需用您的元素更改“elementInQuestion”即可。您甚至可以创建一个函数来将事件侦听器分配给您的每个导航按钮。

【讨论】：

【解决方案3】：

有一个更高效的 JAVASCRIPT 解决方案。

<html>
<head>
<title>
star appear
</title>
<style type="text/css">
    #stardiv
    {
        height: 16px;
        width: 25px;
    }
</style>
</head>
<div style="opacity:0;" id="stardiv">☆</div><div onmouseout="document.getElementById('stardiv').style.opacity= '0';" onmouseover="document.getElementById('stardiv').style.opacity= '1';">HOVER ME</div>
</html>

JSFIDDLE:https://jsfiddle.net/Lhobpwq9/

【讨论】：