Is there any better way to achieve this hovering effect [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 months ago.
Improve this question
* {
margin: 0;
padding: 0;
}
button {
margin: 0.3rem;
text-align: center;
border: none;
font-size: 1.2rem;
padding: 1rem;
border-radius: 15px;
background-color: transparent;
}
#last-btn {
background-color: black;
color: white;
}
#first-btn:hover+#last-btn {
background-color: transparent;
color: black;
}
button:hover {
background-color: black;
color: white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<button id="first-btn"><i class="fa fa-list"></i></button>
<button id="last-btn"><i class="fa-solid fa-grip-vertical"></i></button>
I am here to ask if there are any better to achieve this hovering effect between any two elements only using css without any 3rd party framework? Any suggestions would be great help! This seems good too but would be appreciated if any short method is there.
I want last-btn to be of background black on screen loaded without changing with hover class, plz run the below file once to see the example

Answer 1

In a game where the less css rules is better, I think another strategy could be to have the two rules for button and button:hover in place and only one extra rule that will set the style of the #last-btn, only if no button are on :hover.
* {
margin: 0;
padding: 0;
}
button {
margin: 0.3rem;
text-align: center;
border: none;
font-size: 1.2rem;
padding: 1rem;
border-radius: 15px;
background-color: transparent;
}
button:hover,
button:not(:hover)+#last-btn{
background-color: black;
color: white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<button id="first-btn"><i class="fa fa-list"></i></button>
<button id="last-btn"><i class="fa-solid fa-grip-vertical"></i></button>

Answer 2

I guess its better to do this without define, which is the first or the last one. Less code and more flexibility.
With the active class you can mark the active one.
I know you search for less code but with buttons, i guess this is the shortest without change your style part.
* {
margin: 0;
padding: 0
}
button {
margin: 0.3rem;
text-align: center;
border: none;
font-size: 1.2rem;
padding: 1rem;
border-radius: 15px;
background-color: transparent
}
button:hover+button {
background-color: transparent;
color: black
}
button:hover, .active {
background-color: black;
color: white
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<button><i class="fa fa-list"></i></button>
<button class="active"><i class="fa-solid fa-grip-vertical"></i>

Answer 3

As a relative newbie to all this I'd keep it simple as possible. If you have different buttons doing different things, then you do need to separate them.
I'd just do
#first-button {background-color: green;}
#first-button:hover {background-color: blue;}
#last-button {background-color: yellow;}
#last-button:hover {background-color: red;}
I'm a newbie but I think typing more and just separating things out makes it clearer and easier to play around with the single elements individually.
Of course if you can combine, then I would.
Additional advice: I found out :hover doesn't really work on touchscreen anyway and possibly not on Safari (?) so if you want something else to happen when the person CLICKS on the button too, you need to include #first-button:active as well as :hover for it to do anything.
This is my first ever answer so hopefully it is OK..

Answer 4

Here's my go:
button{
margin: 0.3rem;
text-align:center;
border: none;
font-size: 1.2rem;
padding: 1rem;
border-radius: 15px;
background-color: white;
color: black;
/* Just a few nice things */
cursor: pointer;
transition: all .3s ease-in-out;
}
.button-holder button:hover{
background-color: black;
color: white;
}
.button-holder #first-btn:hover + #last-btn{
background-color: white;
color: black;
}
#last-btn{
background-color: black;
color: white;
}
<div class="button-holder">
<button id="first-btn">Button 1</button>
<button id="last-btn">Button 2</button>
</div>

Answer 5

Your question is not clear enough, but let's try to help.
I think your question is how to shorten this code you have, and not how to accomplish something else,
So we can just combine some selectors and go on.
* {
margin: 0;
padding: 0;
}
button {
margin: 0.3rem;
text-align: center;
border: none;
font-size: 1.2rem;
padding: 1rem;
border-radius: 15px;
background-color: transparent;
}
#last-btn, #first-btn:hover {
background-color: black;
color: white;
}
#first-btn:hover+#last-btn {
background-color: transparent;
color: black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<button id="first-btn"><i class="fa fa-list"></i></button>
<button id="last-btn"><i class="fa-solid fa-grip-vertical"></i></button>
Here I just said that the first-btn and the hover status of the last-btn are the same style, then I said that when I hover over the last button let's set the first button again.
I think that's what you want.