我想在用户将鼠标悬停在购物车图标上时打开弹出面板,例如 this example from W3Schools .
这个和SO的收件箱是类似的思路:
我试过了 this code , 但看起来我遗漏了什么。
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<i class="fa fa-shopping-cart w3-margin-right dropdown" onmouseover="javascript:void(0)"></i>
<div class="dropdown-content"><p>This is a test</p></div>
<i class="fa fa-search"></i>
最佳答案
您也可以像下面这样使用“+”或“~”:
.dropdown:hover + .dropdown-content {
//your css code
}
.dropdown:hover ~ .dropdown-content {
//your css code
}
关于javascript - CSS-如何在悬停 i 标签时显示面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54751349/