英文:
how to show/hide or display/hide content-list in css
问题
这是一个简单的代码，用于显示和隐藏内容。当鼠标悬停在按钮上时，列表会显示，但当我想浏览我的列表（例如a或b或c）时，列表将消失。我需要的是在浏览列表时保留内容或我的列表。是否有解决方法？
.hide {
display: none;
}
.myDiv:hover + .hide {
display: block;
color: red;
}
<ul>
<button class="myDiv">hover</button>
<div class="hide">
<li>a</li>
<li>b</li>
<li>c</li>
</div>
</ul>
英文:
This is a simple code to show and hide content. when the button is hovered the list is shown but when I want to go through my list (for example a or b or c ) it (the list) will be disappeared.something that i need to have is remaining content or my list when i go through it. is there any way to solve it?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.hide {
display: none;
}
.myDiv:hover+.hide {
display: block;
color: red;
}
<!-- language: lang-html -->
<ul>
<button class="myDiv">hover</button>
<div class="hide">
<li>a</li>
<li>b</li>
<li>c</li>
</div>
</ul>
<!-- end snippet -->
I tried it by css code
答案1
得分: 0
这是翻译后的内容：
"当你在悬停在按钮上后尝试遍历列表项时，列表会自然隐藏。这是因为一旦你将光标移动到列表项上，按钮的悬停事件就被移除了。
因此，为了解决这个问题，你需要在父元素，也就是 ul 中添加悬停事件。
类似这样：
<style>
.hide {
display: none;
}
ul:hover .hide {
display: block;
color: red;
}
</style>
```"
<details>
<summary>英文:</summary>
It's natural your list gets hidden when you try to go through list items after hovering the button. It's because once you move your cursor to list items hover event for the button is removed.
So to handle this you need to add hover in the parent in your case `ul`.
something like this:
<style>
.hide {
display: none;
}
ul:hover .hide {
display: block;
color: red;
}
</style>
</details>
# 答案2
**得分**: 0
我重新组织了HTML结构并更新了CSS以便更好理解。
请记住，我已经给了`myDiv`类`display:inline-block`来限制100%的宽度。
```css
.myDiv {
display: inline-block;
}
.hide {
display: none;
margin: 0;
}
.myDiv:hover .hide {
display: block;
color: red;
}
<div class="myDiv">
<button class="button">hover</button>
<ul class="hide">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
英文:
I have re-organize the html structure and updated css for better understanding.
Keep in mind that I have given display:inline-block to myDiv class restrict 100% width.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.myDiv{
display: inline-block;
}
.hide {
display: none;
margin: 0;
}
.myDiv:hover .hide {
display: block;
color: red;
}
<!-- language: lang-html -->
<div class="myDiv">
<button class="button">hover</button>
<ul class="hide">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论