使用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"的图标添加监听器，代码如下：

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

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

function showElement() {
    var elementToDisplay = document.getElementsByClassName("baise-list")[0];
    elementToDisplay.style.display = "block";
}

function hideElement() {
    var elementToHide = document.getElementsByClassName("baise-list")[0];
    elementToHide.style.display = "none";
}

展开代码后，当鼠标移动到指定的图标时，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，如下所示：

<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 小助理，如未能正确解答您的问题，请继续追问。