Hover effect on one element affect another

Asked

Viewed 16,389 times

5

I wonder how I can make the event :Hover in one element take effect in another... I have the following code:

<ul>
  <a href="#">
     <li>
        <div id="search-image"><img src="images/image.jpg"/></div>
        <h1>Título</h1>
        <div id="search-bottom">
           <p class="price"><b>R$</b> XXX</p>
           <p class="deal">Texto</p>
           <p class="date">xx/xx/xx</p>
        </div>
     </li>
  </a>
</ul>

I would like to put a border and change the title color h1 to have the effect Hover in the element <li>.

css hover

3 answers

9


Noting that the h1 is inside the li, you can do with pure CSS. For example:

li:hover h1 {
    /*aqui o seu estilo para H1*/
}

See working:

li:hover h1 {
  border: 2px solid #FFFF00;
  color: #ff0000;
}

li:hover img {
  transform:scale(2);
}
<ul>
  <a href="#">
    <li>
      <div id="search-image">
        <img src="images/image.jpg" />
      </div>
      <h1>Título</h1>
      <div id="search-bottom">
        <p class="price"><b>R$</b> XXX</p>
        <p class="deal">Texto</p>
        <p class="date">xx/xx/xx</p>
      </div>
    </li>
  </a>
</ul>

when placing the cursor over the li, the H1 and the img will have their style changed.

  • You can also use pure css to affect elements that are not children of the element that receives Hover, as long as it is possible to reference it. An example would be using + to reference a tag that is "sister" to the tag that gets the Hover.

  • Thank you, I’m going to style this element Li and put a border around it, only when the effect occurs it kind of distorts, as in this example you made, how do I make it still? And thank you again :)

  • And how to make this effect on more than one element? for example, I would like to increase the size of the image inside the "search-image" div with the Transform: Scale() in the Hover effect in the li element as well.

  • The idea is the same: li:hover img { /*estilo da imagem*/ }, I edited the answer, look at that

3

Just you use the hover in the definition of the element you want to reach in CSS. Think about hover as a pseudo attribute of the element. It actually serves to identify any element in the same way that a class would. Contrary to the most common habit, the hover need not necessarily be used at the end of the definition.

In this case, to put a thin and silver edge and make the title h1 blue for example, the code would be as follows:

li:hover h1{
    border: solid thin silver;
    color: blue;
}

The same goes for the other pseudo elements.

0

A class calling another after passing the mouse over in css

.imagemfundo{
    height: 221px;
    background-color:blue;
    background-repeat: no-repeat;
    align-items: center;
    width: 221px;
    
}    
.textocentro{
    
    display:none;
}

.imagemfundo:hover .tituloimagen{
    
 display:block;
 font-size: 18px;
 align-items: center;
 height: 180px;
 width:180px;
 background: red;
 margin: 20px;
 border-radius: 221px;
 display: flex;
position: absolute;

}

.imagemfundo:hover .textocentro{
   align-items: center;
   display: flex;
   left: 40%;
    position: absolute;
}
    
<div class="imagemfundo">
    
    
  <div class="tituloimagen">
  
    <div class="textocentro">
       texto 
        
    </div>
    
</div>    
    
    
</div>

Browser other questions tagged css hover

You are not signed in. Login or sign up in order to post.