CSS悬停-悬停在块上时更改标题、说明和背景

Question

我有以下CSS项目，我正试图在滚动时同时更改悬停效果。blocks项目

.阻止项目.blocks项目标题.blocks项目描述.阻止项目链接

我已经设置了.块项目：悬停到以下位置：

.blocks-item:hover {
background: #f8f8f8;
color: #15191f;
}

如果我执行以下操作：

.blocks-item:hover,
.blocks-item-title:hover {
background: #f8f8f8;
color: #15191f;
}

然后标题只有在用鼠标滚动时才会改变颜色，这是我所期望的。

我正在尝试绑定所有4个元素，这样我只需要将鼠标悬停在.blocks项目上，就可以更改所有其他项目的悬停效果(描述、标题、链接(

最好的办法是什么？我知道这个问题已经得到了很多次回答，但很难适应解决方案。感谢您的理解并帮助

HTML:

<ul class="blocks-list">
<li class="blocks-item">
<a href="/support/tickets/new" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-pencil"></span></span>
<span class="blocks-item-title">Create Ticket</span>
<span class="blocks-item-description">Submit a tracked ticket for any IT queries or issues here</span>
</a>
</li>
<li class="blocks-item">
<a href="tel:" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-phone-handset"></span></span>
<span class="blocks-item-title">Call Us</span>
<span class="blocks-item-description">Our call centre is available 24/7 to help with issues and queries</span>
</a>
</li>
<li class="blocks-item">
<a href="#!" onclick="window.fcWidget.open();" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-bubble"></span></span>
<span class="blocks-item-title">Live Chat</span>
<span class="blocks-item-description">Our live chat service is available from 8am - 8pm Monday - Friday</span>
</a>
</li>
<li class="blocks-item">
<a href="mailto:?subject=Support Request - " class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-envelope"></span></span>
<span class="blocks-item-title">Email</span>
<span class="blocks-item-description">For non-urgent issues, queries or general enquiries. We will respond within 24 Hours</span>
</a>
</li>
</ul> 

Answer 1

由于元素是.blocks-item的子元素，因此非常简单。从CSS选择器.blocks-item:hover开始，然后使用选择器来确定要更改的内容。

.blocks-item:hover .blocks-item-title {
color: red
}
.blocks-item:hover .blocks-item-description {
color: green
}
.blocks-item:hover .blocks-item-link {
font-size: 2rem;
}

<ul class="blocks-list">
<li class="blocks-item">
<a href="/support/tickets/new" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-pencil"></span></span>
<span class="blocks-item-title">Create Ticket</span>
<span class="blocks-item-description">Submit a tracked ticket for any IT queries or issues here</span>
</a>
</li>
<li class="blocks-item">
<a href="tel:" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-phone-handset"></span></span>
<span class="blocks-item-title">Call Us</span>
<span class="blocks-item-description">Our call centre is available 24/7 to help with issues and queries</span>
</a>
</li>
<li class="blocks-item">
<a href="#!" onclick="window.fcWidget.open();" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-bubble"></span></span>
<span class="blocks-item-title">Live Chat</span>
<span class="blocks-item-description">Our live chat service is available from 8am - 8pm Monday - Friday</span>
</a>
</li>
<li class="blocks-item">
<a href="mailto:?subject=Support Request - " class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-envelope"></span></span>
<span class="blocks-item-title">Email</span>
<span class="blocks-item-description">For non-urgent issues, queries or general enquiries. We will respond within 24 Hours</span>
</a>
</li>
</ul>