使用display:none先隐藏，当鼠标移动到指定的图标才显现应该怎么做

giegie666

.baise-list{
    width: 100%;
    height: 229px;
    background: #fff;
    border-top:1px solid #eee ;
    box-shadow: 0 3px  4px rgba(0,0,0,0.1);
    position: absolute;
    left: 0;
    top: 80px;
      display: none;  
   
}

FishC

要实现鼠标移动到指定的图标时显示隐藏元素，可以使用JavaScript来控制样式的变化。

首先，给需要点击或者鼠标移动到的图标添加一个事件监听器。比如，我们给一个id为"icon"的图标添加监听器，代码如下：

1. var icon = document.getElementById("icon");
   
2. icon.addEventListener("mouseover", showElement);
   
3. icon.addEventListener("mouseout", hideElement);

复制代码

然后，我们定义showElement和hideElement两个函数，来控制隐藏元素的显隐。

1. function showElement() {
   
2.     var elementToDisplay = document.getElementsByClassName("baise-list")[0];
   
3.     elementToDisplay.style.display = "block";
   
4. }
   
5. 
   
6. function hideElement() {
   
7.     var elementToHide = document.getElementsByClassName("baise-list")[0];
   
8.     elementToHide.style.display = "none";
   
9. }

复制代码

展开代码后，当鼠标移动到指定的图标时，baise-list这个元素就会显示出来，当鼠标离开时，又会隐藏起来。

希望对你有帮助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

giegie666

FishC 发表于 2024-1-4 21:22
要实现鼠标移动到指定的图标时显示隐藏元素，可以使用JavaScript来控制样式的变化。

首先，给需要点击或 ...

能使用css+html吗

FishC

giegie666 发表于 2024-01-04 23:13
能使用css+html吗

当然可以！你可以使用纯CSS和HTML实现鼠标移动到指定图标时显示隐藏元素。

首先，在HTML中添加一个用于显示隐藏元素的容器，并给它一个唯一的id，如下所示：

1. <div id="hidden-content">
   
2.   <!-- 这里是你要隐藏显示的内容 -->
   
3. </div>

复制代码

然后，在CSS中设置该容器的初始状态为隐藏：

1. #hidden-content {
   
2.   display: none;
   
3. }

复制代码

接着，给鼠标需要响应的图标添加一个class，例如"show-content"，并在CSS中定义鼠标移动到该图标时显示隐藏元素的样式：

1. .show-content:hover + #hidden-content {
   
2.   display: block;
   
3. }

复制代码

最后，你可以在其他地方使用带有"class=show-content"的图标，并将隐藏内容的id作为相邻选择器，如下所示：

1. <span class="show-content">鼠标移动到我</span>
   
2. 
   
3. <div id="hidden-content">
   
4.   <!-- 隐藏的内容 -->
   
5. </div>

复制代码

这样，当鼠标移动到具有"class=show-content"的图标上时，隐藏内容的容器就会显示出来。

希望这个纯CSS和HTML的实现方式对你有帮助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。