How to activate a css function when you hover over another element

Question

.addTaskP, .fa-solid {
    display: inline;
    cursor: pointer;
    font-size: 17px;
}
.fa-solid{
    color: rgba(251, 49, 49, 0.774);
}
.fa-solid:hover{
    background-color: rgba(251, 49, 49, 0.774);
    color: white;
    border: 1px solid transparent;
    border-radius: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />    
<div class="date">
        <h2>Today <span id="date"> Thursday April 21</span></h2> 
        <i class="fa-solid fa-plus"></i>
        <p class="addTaskP">Add Task</p>
    </div>

I have a hover function over the icon but I want the same function to activate on the p tag when I hover on the P tag.

score 0 · Accepted Answer · answered Apr 22 '22 at 02:33

.addTaskP, .fa-solid {
    display: inline;
    cursor: pointer;
    font-size: 17px;
}
.hover_event .fa-solid {
    color: rgba(251, 49, 49, 0.774);
}
.hover_event .fa-solid:hover{
    background-color: rgba(251, 49, 49, 0.774);
    color: white;
    border: 1px solid transparent;
    border-radius: 100%;
}
.hover_event:hover > .fa-solid {
    background-color: rgba(251, 49, 49, 0.774);
    color: white;
    border: 1px solid transparent;
    border-radius: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />    
<div class="date">
        <h2>Today <span id="date"> Thursday April 21</span></h2>
        <div class="hover_event"> 
             <i class="fa-solid fa-plus"></i>
             <p class="addTaskP">Add Task</p>
        </div>
    </div>

make parent element and give class name like hover_event. and use > this sign. so if you hover with .hover_event class, .fa-solid will be change.

How to activate a css function when you hover over another element

1 Answers1