Question 108436 in Html Question posted in
Some basic documentation can be found here.

Html – CSS hover animation

I need an HTML CSS code that will have 4 elements for example 4 rectangles, when I randomly select one of these four and move the mouse to it, I want all the others except my selected rectangle to become semi-transparent.
I want to do all this with only HTML CSS hover

I tried to use the :not() class with :hover but it didn’t work, I tried almost everything but still didn’t get the result, I also tried using chatGPT but it doesn’t do everything the way I want. I don’t even know if it’s possible to do this with CSS, but I’ve spent a lot of time on it and I don’t want to just throw it away.

Tags:

2

Answers


  1. 0

    Use parent div tag and concentrate you css for that tag and it children

    But all children are modified everything will become transparent, so use the child selector > to re-do the css for that particular div which is currently focused by mouse

    For semi-transparent div tag you can rgba background-color, Please adjust the rgba with your own color combination

    background-color: rgba(30, 52, 142, 0.5);
color: rgba(255, 255, 255, 0.5);

    For demo I put red color border, you can remove it

    Keep the css order to make it work

    Example

    .parent:hover  div {
   background-color: rgba(30, 52, 142, 0.5);
   color: rgba(255, 255, 255, 0.5);
}

.parent:hover > div:hover {
   border: solid red 1px;
   background-color: blue;
   color: white;
}

.child {
   border: solid red 1px;
   background-color: blue;
   color: white;
}
    <div class="parent">
<div class="child">
   div 1
</div>
<div class="child">
   div 2
</div>
<div class="child">
   div 3
</div>
<div class="child">
   div 4
</div>
<div class="child">
   div 5
</div>
</div>
    Login or Signup to reply.
  2. 0

    I have Two Answers one is CSS only and The other one uses JS.

    <body>
    <div class="container">
      <div class="wrapper">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
      </div>
    </div>
</body>

    CSS

    /* Some Styling */
.container {
    display: grid;
    place-content: center;
    height: 100vh;
}

.wrapper {
    display: flex;
    gap: 1rem;
    width: fit-content;
}

.box {
    display: grid;
    place-content: center;
    width: 200px;
    aspect-ratio: 1 / 1;
    background-color: red;

    transition: opacity 250ms;
 }
    1. CSS only Solution
     /* Add this line to your CSS for using CSS only solution */
 .wrapper:hover .box:not(:hover) {
    opacity: 0.5;
 }
    1. JS Solution
    const boxes = document.querySelectorAll(".box");

function changeOpacityAllBoxes(opacity) {
    boxes.forEach((box) => {
        box.style.opacity = opacity;
    });
}

boxes.forEach((box) => {
    box.addEventListener("pointerenter", (e) => {
        changeOpacityAllBoxes(0.5);
        e.target.style.opacity = "1";
    });

    box.addEventListener("pointerleave", (e) => {
        changeOpacityAllBoxes(1);
    });
});

    Note: CSS only solution has some drawbacks like if you hover on the whitspace between the boxes it also turns the boxes semi-transparent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search