Html 如何在悬停整个锚点的同时使悬停元素位于锚点内部

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

HTML:

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

另外，我的情况有点复杂，所以我不能使用类似

这里是代码为的JSFIDLE检查一下

在

标记中添加一个类，并在该标记上使用

：悬停

范例

HTML

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

这将把样式应用于所有带有
class=“bar”
的元素，这些元素是带有
class=“hoveranchor”
更新Css的元素的直接后代

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

如果您对使用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的不透明度更改为1

在这里查看它的实际操作：
看起来它无法以某种通用方式完成。只有通过像将li包装到某个类和使用css这样的方式

.baz a:hover.foo.hover{
不透明度：1；
}
.baz a:hover.foo.main{
不透明度：0；
}

更新小提琴

因为我用的更少，所以我做了一个函数

.enable-foo-hover（）{
&：悬停{
傅先生{
梅因先生{
不透明度：0；
}
.悬停{
不透明度：1；
}
}
}
}

并将其用于我需要悬停构建的元素。感谢您的回答
您想同时更改div和anchor的背景色吗？我在问题中写道，这不是选项，因为我有更复杂的标记。请看我的提琴，了解完整的标记示例我在问题中写道，这不是选项，因为我有更复杂的标记。请参阅我的小提琴，了解完整的标记示例这不会影响任何其他标记，如果有任何其他问题，请澄清复杂性。。将有助于更好地理解您的需求：）是的，这可能是一个选项。我做了一个较少的混音，这更适合我的caseCool。请选择任何答案或写下自己的答案，并将其标记为已回答：）嗨-请选择此答案作为已接受的答案并关闭问题！：）
<a class="hoveranchor" href="">simple
    <div class='bar'>
    </div>
</a>

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

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

     $(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');
            });
        });