change style of all sibling element when hover?

user_8374731 0
Viewed 56

This is my snippet:

<div class="main">
    <a href="" target="_blank">
        a
    </a>

    <a href="" target="_blank">
        b
    </a>

    <a href="" target="_blank">
        c
    </a>

    <a href="" target="_blank">
        d
    </a>
</div>

<style>
.main a {
    background: blue;
    width: 50px;
    height:50px;
    display: inline-block;
    color: #ffffff;
}

.main a:hover {
    
}
</style>

I want to change the opacity to .5 of all the blue when i hovering each box, the result would be like this enter image description here

is this possible with css?

css html
2 Answers

Sure, it's possible. I've added the style below. You can see it working on this codepen. It relies on detecting hover on the parent, as well as the individual child.

If you plan on putting more content in main, you could wrap the a tags in a div, then target div:hover instead.

<div class="main">
    <a href="" target="_blank">
        a
    </a>

    <a href="" target="_blank">
        b
    </a>

    <a href="" target="_blank">
        c
    </a>

    <a href="" target="_blank">
        d
    </a>
</div>

<style>
.main a {
    background: blue;
    width: 50px;
    height:50px;
    display: inline-block;
    color: #ffffff;
}

.main:hover a {
  opacity: 0.5;
}

.main:hover a:hover {
  opacity: 1;
}
</style>
user_69423190

Assuming that there are only the objects you want to add this effect to in the main Element, I would try something like this: 

.main:hover a { opacity: 0.5 }

and the selected element:

.main:hover a:hover { opacity: 1}

This should create the effect that you would like to achieve.

user_123612690
Related