Hover effect on one element affect another

Question

Hover effect on one element affect another

Navigation

#1 by (6 votes)
#2 by (3 votes)

4

I would like to know how I can make the : hover event 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 color of the title h1 by having the hover effect on the <li> element.

css hover

asked by anonymous 02.10.2015 / 00:50

2 answers

3

Just use hover in the definition of the element you want to achieve in CSS. Think of hover as a pseudo element attribute. It actually serves to identify any element in the same way a class would serve. Unlike most common habits, hover does not necessarily have to be used at the end of the definition.

In this case, to put a thin silver border 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.

02.10.2015 / 01:10

Remove the time part of a date in C # recursive superfatorial problem

score 6 · Accepted Answer

Noting that h1 is within 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 you place your cursor over li, h1 and img will have their style changed.