Question

我有一个列表，UL，我想要接下来的事情：当我悬停列表的一个元素时改变跨度和向后的颜色。

HTML

<ul class="cf">
            <li>One<a href="#" class="class">Olympia</a></li>
            <li>Two<a href="#">Salem</a></li>
</ul>

<a href="#" class="bull class"></a>

和CSS

  #div ul li{
    font-weight: 800;
    margin-bottom:10px;
    float: left;
    margin-left:20px;
 }

 #div ul li a{
   text-decoration: none;
   font-weight: 400;
   margin-left:10px;
 }

  #div a.bull{
    position: absolute;
    z-index: 999;
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
 }

我认为：悬停首先适用于第二个和后退..任何可以给我一个提示？

Answer 1

这不能用CSS完成，因为没有父选择器。但是，使用Javascript很容易：

var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener('mouseenter', function () {
        document.querySelector('.bull.class').style['background-color'] = 'blue';
    });

    lis[i].addEventListener('mouseleave', function () {
        document.querySelector('.bull.class').style['background-color'] = 'red';
    });
}

这样做会绑定到每个li元素的mouseenter和mouseleave事件，并在事件触发时更改background-color锚点的bull class属性

JSFiddle

Answer 2

试试这个Jsfiddle看看这是否是你想要的

HTML：

<ul class="cf">
        <li>One
            <a href="" class="class"> Olympia</a>
        </li>
        <li>Two<a href=""> Salem</a></li>
</ul>

css：

ul li a:hover{
color:pink;
}
ul li a {
color:green;
}

将两个项目都悬停

2 个答案: