使用display:none先隐藏，当鼠标移动到指定的图标才显现应该怎么做
.baise-list{width: 100%;
height: 229px;
background: #fff;
border-top:1px solid #eee ;
box-shadow: 0 3px4px rgba(0,0,0,0.1);
position: absolute;
left: 0;
top: 80px;
display: none;
} 要实现鼠标移动到指定的图标时显示隐藏元素，可以使用JavaScript来控制样式的变化。
首先，给需要点击或者鼠标移动到的图标添加一个事件监听器。比如，我们给一个id为"icon"的图标添加监听器，代码如下：
var icon = document.getElementById("icon");
icon.addEventListener("mouseover", showElement);
icon.addEventListener("mouseout", hideElement);
然后，我们定义showElement和hideElement两个函数，来控制隐藏元素的显隐。
function showElement() {
var elementToDisplay = document.getElementsByClassName("baise-list");
elementToDisplay.style.display = "block";
}
function hideElement() {
var elementToHide = document.getElementsByClassName("baise-list");
elementToHide.style.display = "none";
}
展开代码后，当鼠标移动到指定的图标时，baise-list这个元素就会显示出来，当鼠标离开时，又会隐藏起来。
希望对你有帮助！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-4 21:22
要实现鼠标移动到指定的图标时显示隐藏元素，可以使用JavaScript来控制样式的变化。
首先，给需要点击或 ...
能使用css+html吗 giegie666 发表于 2024-01-04 23:13
能使用css+html吗
当然可以！你可以使用纯CSS和HTML实现鼠标移动到指定图标时显示隐藏元素。
首先，在HTML中添加一个用于显示隐藏元素的容器，并给它一个唯一的id，如下所示：
<div id="hidden-content">
<!-- 这里是你要隐藏显示的内容 -->
</div>
然后，在CSS中设置该容器的初始状态为隐藏：
#hidden-content {
display: none;
}
接着，给鼠标需要响应的图标添加一个class，例如"show-content"，并在CSS中定义鼠标移动到该图标时显示隐藏元素的样式：
.show-content:hover + #hidden-content {
display: block;
}
最后，你可以在其他地方使用带有"class=show-content"的图标，并将隐藏内容的id作为相邻选择器，如下所示：
<span class="show-content">鼠标移动到我</span>
<div id="hidden-content">
<!-- 隐藏的内容 -->
</div>
这样，当鼠标移动到具有"class=show-content"的图标上时，隐藏内容的容器就会显示出来。
希望这个纯CSS和HTML的实现方式对你有帮助！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]