How to change css of image when other element is hovered?-CodePudding

i am making something where you can play html games on it. Here is my code:

<div >
  <a href="pong.html" id="togame">
    <img src="pong.png" alt="Avatar" style="width:100%; border-radius: 15px 15px 0 0; height: 130px;" id="gimg">
    <div >
      <h4 style="font-size: x-large; padding: 0%;">Pong</h4>
      <p>Recreated version of retro game "pong", or table tennis on computer</p>
    </div>
  </a>
</div>

can you make it so when i hover ona card anywhere, the images border-radius is changed? Thank you

CodePudding user response：

You need to get rid of inline styling, since it overrides anything that we declare in CSS.
So, I assigned a .rounded class in <img> tag. Then, you grab the parent element, which is .card, and you assign a hover rule on it. Then, you use the previously mentioned new class .rounded along with the change.
So you have something like this:

.rounded {
  border-radius: 15px 15px 0 0;
}

.card:hover .rounded {
  border-radius: 0;
}

.card {
  background: #ccc3;
}

<div >
  <a href="pong.html" id="togame">
    <img src="https://via.placeholder.com/150x150"  style="width:100%; height: 130px;" id="gimg">
    <div >
      <h4 style="font-size: x-large; padding: 0%;">Pong</h4>
      <p>Recreated version of retro game "pong", or table tennis on computer</p>
    </div>
  </a>
</div>

CodePudding user response：

You can :

Add a class to your <img> tag as I did like
Create a CSS file and add the following line :

.card:hover .imgHover { border-radius : 10px 10px 0 0 }
Modify the border-radius values as you wish

.card:hover .imgHover { border-radius : 10px 10px 0 0 }

.imgHover {
 width:100%;
 height: 130px
}

<div >
  <a href="pong.html" id="togame">
    <img  src="pong.png" alt="Avatar" id="gimg">
    <div >
      <h4 style="font-size: x-large; padding: 0%;">Pong</h4> 
      <p>Recreated version of retro game "pong", or table tennis on computer</p> 
    </div>
  </a>
</div>