Question

当光标翻转到<a>标签时如何显示按钮？

我用CSS做了这个，我尝试了以下但是没有用：

CSS部分：

.NameClass:hover > ul {
    display: block;
}

HTML部分：

<a target="_blank" href="#" class="current-path-button NameClass" >
   Shop
    <ul class="dropdown-menu customize-dropdown-menu" style="display: none">
        <li><i style="color: black; font-size: 36px;" class="fa fa-shopping-cart"></i></li>
    </ul>
</a>

Answer 1

你的代码是正确的，只是将display:none放入你的外部css，你的问题是由内联css覆盖那个css引起的！

check this codepen

Answer 2

使用此：

a:hover + button {
  display: block;
}

这是一个小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/Xg22U/

对于您的代码，您可以使用：

.NameClass:hover + ul.dropdown-menu {
  display: block;
}

Answer 3

试试这个：

.NameClass:hover > ul {
    display: block !important;
   }

这是因为优先顺序。内联样式优先于CSS样式，因此需要在CSS样式后设置!important。

jsFiddle is here

光标在<a> tag</a>上时显示按钮

3 个答案: