When the parent DIV is hovered over, the image and text properties will be altered

Question

When the parent DIV is hovered over, the image and text properties will be altered

Greetings,

I am just starting out in web development and would like to seek guidance from the Stack Overflow community. Here is a link to my code: https://codepen.io/noxwon/pen/RwrmxKX

My code is very basic and filled with repetitive lines. I have multiple hover functions for different boxes, each with similar actions. I want to simplify this code, as I find it challenging to handle repetitive tasks with loops.

Your suggestions and advice on simplifying this code would be greatly appreciated.

Thank you for your time and assistance.

jquery css

Answer 1

Answer №1

You can achieve the desired effect without the need for javascript by utilizing CSS. By adjusting the styling of elements on hover, you can display or hide images using the CSS display property.

.box {
   background: white;
   color: black;
}

.box:hover {
   background: red;
   color: white;
}

.box:hover .img-1 {
   display: none
}

.box:hover .img-2 {
   display: block
}

.wrapper-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    background-color: #fafafa;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
    width: 180px;
    margin: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.box:hover {
  background-color: #DA4E51;
}

.box:hover a.icon-link {
  color: #FFF;
}

.box:hover .icon-img-1 {
  display: none;
}

.box:hover .icon-img-2 {
  display: inline;
}

.box .text {
    padding: 24px;
    text-align: center;
}

a.icon-link {
    text-decoration: none;
    color: #000;
}

.icon-img-2 {
  display: none;
}

img { width: 70px; }

<div class="wrapper-icons">
  
  <div class="box">
    
    <a class="icon-link" href="https://google.com">
      
      <div class="text">
        
        <div class="title">
          
          <img class="icon-img-1" 
               src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" name="MyImage" />
          
          <img class="icon-img-2" 
               src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png" name="MyImage" />
          
        </div>
        
        <p class="box-text">SET1</p>
        
        <p>Movie</p>
        
      </div>
    </a>
    
  </div>

 
</div>

Answer 2

You can achieve the desired effect without the need for javascript by utilizing CSS. By adjusting the styling of elements on hover, you can display or hide images using the CSS display property.

.box {
   background: white;
   color: black;
}

.box:hover {
   background: red;
   color: white;
}

.box:hover .img-1 {
   display: none
}

.box:hover .img-2 {
   display: block
}

.wrapper-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    background-color: #fafafa;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
    width: 180px;
    margin: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.box:hover {
  background-color: #DA4E51;
}

.box:hover a.icon-link {
  color: #FFF;
}

.box:hover .icon-img-1 {
  display: none;
}

.box:hover .icon-img-2 {
  display: inline;
}

.box .text {
    padding: 24px;
    text-align: center;
}

a.icon-link {
    text-decoration: none;
    color: #000;
}

.icon-img-2 {
  display: none;
}

img { width: 70px; }

<div class="wrapper-icons">
  
  <div class="box">
    
    <a class="icon-link" href="https://google.com">
      
      <div class="text">
        
        <div class="title">
          
          <img class="icon-img-1" 
               src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" name="MyImage" />
          
          <img class="icon-img-2" 
               src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png" name="MyImage" />
          
        </div>
        
        <p class="box-text">SET1</p>
        
        <p>Movie</p>
        
      </div>
    </a>
    
  </div>

 
</div>

When the parent DIV is hovered over, the image and text properties will be altered

Answer №1

Similar questions

Remove a specific line from a PHP script

Invert the motion within a photo carousel

Including an image side by side with clickable text within a list

illuminate selected row in datatable using a jquery plugin

Remove HTML tags from a table cell containing a combination of radio buttons and labels

Display an AJAX div when the image is hovered over and have it track the movement of

Is it possible to determine the height of a div after it has been rendered using the .resize method?

Accessing Form Data with jQuery for AJAX Request

A serene web service that delivers XML data

Is there a way to make a link clickable but also prevent another link from being activated when clicked?

Unable to perform updates for personalized fonts

The Jquery Ajax image loading function will only work successfully when an alert statement is included within the $(window).one function

Is there a way for me to access the property value utilized in the Cypress test?

I have successfully implemented a click effect on one image and now I wish to apply the same effect to the remaining images

Having trouble changing a CSS property (margin-right)?

The Jquery onclick function is executing multiple times, with each iteration increasing in

Incorporate the casper function within the casper.evaluate() method

Tips for creating a responsive graphic using Bootstrap CSS

Which is better: Starting with rows or columns in Bootstrap 4 layout design?

additional space within bootstrap columns