Html 如何创建导航标头，当您将鼠标悬停在上方时，该标头将显示一个星形_Html_Css_Hover

Html 如何创建导航标头，当您将鼠标悬停在上方时，该标头将显示一个星形

html css

Html 如何创建导航标头，当您将鼠标悬停在上方时，该标头将显示一个星形,html,css,hover,Html,Css,Hover,我正在为我的网站创建导航栏，我想创建一个悬停状态，这样当你将鼠标悬停在家庭、工作或联系人标签上时，就会出现一个星星。这是否可以通过代码添加，或者我需要将此文本转换为图像才能添加。有关我在XD中创建的内容，请参见图片只需将“elementInQuestion”更改为您的元素。您甚至可以创建一个函数，将事件监听器分配给每个导航按钮。是的，您可以很容易地使用CSS来完成这项工作，例如： .star{ 可见性：隐藏； } .物品：悬停。星星{ 能见度：可见； } 和#9733；hello wor

我正在为我的网站创建导航栏，我想创建一个悬停状态，这样当你将鼠标悬停在家庭、工作或联系人标签上时，就会出现一个星星。这是否可以通过代码添加，或者我需要将此文本转换为图像才能添加。有关我在XD中创建的内容，请参见图片

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

是的，您可以很容易地使用CSS来完成这项工作，例如：

.star{
可见性：隐藏；
}
.物品：悬停。星星{
能见度：可见；
}

和#9733；hello world

有一个更高效的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>


明星出现
#斯塔迪夫
{
高度：16px；
宽度：25px；
}
☆盘旋我

JSFIDDLE:

哇，谢谢！你知道我是否可以像示例中那样制作自定义星形/图像吗？@erin是的，你可以替换

★

类似于

@erin，我编辑了我的答案，用图片展示了一个示例。

<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>