Question

我在锚点内有一个内联阻塞的div

HTML：

<ul>
   <li>
       <a href="">simple
       <div class='bar'>
       </div>
       </a>
   </li>
</ul>

CSS：

.bar {
    width: 25px;
    height: 25px;
    background-color: red;
    display: inline-block;
}
.bar:hover {
    background-color: blue;
}

当我悬停锚点时，我需要在div上悬停效果，而不仅仅是div。

另外，我的情况有点复杂，所以我不能使用像这样的东西

a:hover .bar {
    background-color: blue;
}

这是jsfiddle代码http://jsfiddle.net/zeL102wr/2/

Answer 1

选中此http://jsfiddle.net/zeL102wr/4/

在您的<a>标记中添加一个类，然后在该

上使用:hover

实施例

<强> HTML

<a class="hoveranchor" href="">simple
    <div class='bar'>
    </div>
</a>

<强> CSS

.hoveranchor:hover > .bar {
    background-color: blue;
}

这会将样式应用于class="bar"的所有元素，这些元素是class="hoveranchor"

元素的直接后代

Answer 2

看起来不能以某种普遍的方式完成。只有将li包装到某个类并使用css

.baz a:hover .foo .hover {
    opacity: 1;
}
.baz a:hover .foo .main {
    opacity: 0;
}

更新了小提琴http://jsfiddle.net/zeL102wr/17/

由于我使用LESS，我做了一个功能

.enable-foo-hover() {
&:hover {
    .foo {
        .main {
            opacity: 0;
        }
        .hover {
            opacity: 1;
        }
    }
}
}

并将其用于我需要悬停构造的元素。谢谢你的回答

Answer 3

更新了Css

ul li a:hover ,.bar:hover {
    background-color: blue;
}

Demo

Answer 4

如果您使用jquery就可以了，以下内容适用于您的'高级'列表项......

<强> JQUERY

     $(document).ready(function () {
            $('.hoveranchor').mouseover(function (e) {
                console.log($(this).children('.main'));
                $(this).find('.main').addClass('hover');
                $(this).find('.main').removeClass('main');
            });

            $('.hoveranchor').mouseout(function (e) {
                console.log($(this).children('.main'));
                $(this).find('.hover').addClass('main');
                $(this).find('.hover').removeClass('hover');
            });
        });

此外，您需要：

将class ='hoveranchor'添加到您的锚标记
删除
删除css：hover
将.hover的不透明度更改为1

点击此处查看：http://jsfiddle.net/zeL102wr/5/

如何在悬停整个锚点时将悬停元素置于锚点内

4 个答案: