Question

我正在尝试在第一个跨度时更改第二个跨度的背景。我的意思是你什么时候在我的行上，然后menu-settings-img改变背景和菜单设置 - 标题改变文本的颜色。我尝试在css中做到这一点，但我真的不知道如何实现这一目标。你能帮助我吗？我的代码：

<div class="row" style="margin-top: 10px;">
    <div style="margin-left: 50px;">
        <a href="" id="link-settings" href="">
        <div width="80%;">
          <span class="menu-settings-img">
            <img style="width: 4%;" src="{{(career.png) }}">
          </span>
          <span class="menu-settings-title">@lang('main.career')</span>
        </div>
        </a>
    </div>
</div>

Answer 1

你可以用+选择器以这种方式使用css：

<style type="text/css">
.menu-settings-img:hover + span {
    background-color: #F0F;
}
</style>

<div class="row" style="margin-top: 10px;">
    <div style="margin-left: 50px;">
        <a href="" id="link-settings" href="">
        <div width="80%;">
          <span class="menu-settings-img">
            <img style="width: 4%;" src="http://placehold.it/300x300.jpg">
          </span>
          <span class="menu-settings-title">titre</span>
        </div>
        </a>
    </div>
</div>

+选择器指向下一个cibling元素。有关更多信息，请参阅this doc。

在另一个跨度上悬停时更改跨度背景

1 个答案: