CSS Hover - Change Title, Description and Background when hovering over block

Question

I have the following CSS items that I am trying to simultaneously change the hover effect for when rolling over.blocks-item

.blocks-item.blocks-item-title.blocks-item-description.blocks-item-link

I have set.blocks-item:hover to the following:

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

If I do the following:

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

Then the title only changes colour when rolled over with the mouse which I am expecting.

I am trying to bind all of the 4 elements so that I only need to hover over.blocks-item to be able to change the hover effect of all of the other items (description, title, link)

What is the best way of going about this? I know this has been answered many times but struggling to adapt the solutions. Appreciate the understanding and help

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

Since the elements are children of .blocks-item , it's pretty simple. Start with a CSS selector .blocks-item:hover and then use a selector to target what you want to change.

 .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>