Avoid Scale with :Hover link inside a <li>

Asked

Viewed 138 times

-1

I have a code I want to apply scale in all the <a> and <button>, as shown in the example below:

body{
   background: #000;
}

#lista, #lista li{
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: 20px;
}

#lista li{
   width: 25%;
   max-width: 100px;
   min-width: 70px;
   display: inline-block;
   margin: 20px 10px 10px 10px;
   vertical-align: top;
}

#lista li a{
   color: #fff;
}

#lista li{
   -webkit-transition: color .1s ease;
   transition: color .1s ease;
}

#lista li img{
   width: 100%;
   max-width: 100px;
   max-height: 100px;
   margin-bottom: 10px;
   opacity: .9;
   -webkit-transition: -webkit-transform 1s ease;
   transition: transform opacity 2s ease;
}

#lista li:hover img{
   opacity: 1;
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
   -webkit-transition: -webkit-transform .1s ease;
   transition: transform opacity .1s ease;
}

a{
   text-decoration: none;
   color: #e8747d;
   display: inline-block;
}

a:hover{
   color: #FFFED3;
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}

button, a{
   -webkit-transition: -webkit-transform .1s ease;
   transition: transform .1s ease;
   cursor: pointer;
}

button:hover{
   -webkit-transform: scale(1.18);
   transform: scale(1.18);
}
<ul id="lista">
   <li>
      <a href="#">
         <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Dracula_One_Sheet_Style_F.jpg/220px-Dracula_One_Sheet_Style_F.jpg">
         Título
      </a>
   </li>
</ul>
<div style="background: gray;">
   <a href="#">Link qualquer</a>
   <button>Botão qualquer</button>
</div>

Works perfectly, the problem is that I do not want the text "Title" that accompanies the image within the link on <li> suffer the scale (static), just the image.

I’ve tried to use :not(#lista li a) in some places but without success. I think the way is to use this :not somewhere, but I couldn’t do.

How could I fix this?

css3

  • But because the title has to stay inside the tag a??

  • It’s because if I click on it I want to go to the same place as clicking on the image.

  • Yes, but I find it easier to click on an image than on a non-text?

  • But I want the title to also be a link, not just the image.

  • I get it, it’s in this structure there’s not going to be like that then, as Hugo said, the child element is getting the same properties as the parent element, and there’s no way to remove them.

  • Remove the a:hover{ doesn’t solve the problem ? Or this one has to work but not when there’s an image inside too ?

  • @Isac O a:hover is to catch all the <a>... But I’ve already managed to settle by putting a class on <a> that I don’t want to be affected.

  • Yeah, that’s exactly what I was going to suggest is that it’s pretty simple and it solves because it only hits those it wants

  • @Isac Want to post the answer? Now, what I didn’t understand was this: with class it works, but I don’t understand why :not(#lista li a) does not work. If you want to post an answer explaining why this selector does not work would be welcome.

  • As far as I know the problem has to do with hierarchy. The proof of this is that to exchange for something simple with the not works. Try doing a:not(.desligado):hover { ... and add the offline class to the one that doesn’t want the effect.

  • @That’s what I did.

  • 1

    Judging by this answer https://stackoverflow.com/a/7084147/6087092 it doesn’t seem possible, at least for now, that is, using only css.

Show 7 more comments

2 answers

1

Some CSS effects applied to the parent you cannot remove from the children. For example opacity and filters, blend-modes etc..

In the more specific case of transform, an option is to reverse what was applied in the father in the son, so if u applied scale-up in the father you make a scale-down in the child. In this case :not() you can’t get the effect on the son, as you yourself have tried.

See the example with your code, but to make it work I had to put the text inside a tag, in case I used a tag p to be able to reference in css

        body{
   background: #000;
}

#lista, #lista li{
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: 20px;
}

#lista li{
   width: 25%;
   max-width: 100px;
   min-width: 70px;
   display: inline-block;
   margin: 20px 10px 10px 10px;
   vertical-align: top;
}

#lista li a{
   color: #fff;
}

#lista li{
   -webkit-transition: color .1s ease;
   transition: color .1s ease;
}

#lista li img{
   width: 100%;
   max-width: 100px;
   max-height: 100px;
   margin-bottom: 10px;
   opacity: .9;
   -webkit-transition: -webkit-transform 1s ease;
   transition: transform opacity 2s ease;
}

#lista li:hover img{
   opacity: 1;
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
   -webkit-transition: -webkit-transform .1s ease;
   transition: transform opacity .1s ease;
}

a{
   text-decoration: none;
   color: #e8747d;
   display: inline-block;
}

a:hover{
   color: #FFFED3;
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}
a:hover p{

   -webkit-transform: scale(0.91);
   transform: scale(0.91);
   margin: 0;
}
a p{
   margin: 0;
}

button, a{
   -webkit-transition: -webkit-transform .1s ease;
   transition: transform .1s ease;
   cursor: pointer;
}

button:hover{
   -webkit-transform: scale(1.18);
   transform: scale(1.18);
}
<ul id="lista">
   <li>
      <a href="#">
         <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Dracula_One_Sheet_Style_F.jpg/220px-Dracula_One_Sheet_Style_F.jpg">
         <p> Título</p>
      </a>
   </li>
</ul>
<div style="background: gray;">
   <a href="#">Link qualquer</a>
   <button>Botão qualquer</button>
</div>

Simple example of the use of :not(), notice that by doing the hover no to all p turn red, but not(:first-child) that continues with the initial color

a:hover p:not(:first-child){
   color: red
}
<a href="#">
   <p> Título 1</p>
   <p> Título 2</p>
   <p> Título 3</p>
   <p> Título 4</p>
</a>

  • Thanks young but stayed the same... : D

  • Wow here in Snippet only the image increased, the text shifts a little because the image pushes the tag P from below that has the text. I don’t know why it didn’t work there.

  • I believe that making Scale-down is not a good because the text ends up shaking tb. But obg, I’ll try something here.

  • @sam yes this font rendering problem with these type of effect is quite common. If I think of another option I tell you

  • I voted -1 because it did not answer the question. If it improves I change the ok vote! ;)

1


I managed to settle by putting a class on <a> that I don’t want to be affected:

<a class="links" href="#">

Then I change the a:hover for a:hover:not(.links).

body{
   background: #000;
}

#lista, #lista li{
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: 20px;
}

#lista li{
   width: 25%;
   max-width: 100px;
   min-width: 70px;
   display: inline-block;
   margin: 20px 10px 10px 10px;
   vertical-align: top;
}

#lista li a{
   color: #fff;
}

#lista li{
   -webkit-transition: color .1s ease;
   transition: color .1s ease;
}

#lista li img{
   width: 100%;
   max-width: 100px;
   max-height: 100px;
   margin-bottom: 10px;
   opacity: .9;
   -webkit-transition: -webkit-transform 1s ease;
   transition: transform opacity 2s ease;
}

#lista li:hover img{
   opacity: 1;
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
   -webkit-transition: -webkit-transform .1s ease;
   transition: transform opacity .1s ease;
}

a{
   text-decoration: none;
   color: #e8747d;
   display: inline-block;
}

a:hover:not(.links){
   color: #FFFED3;
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}

button, a{
   -webkit-transition: -webkit-transform .1s ease;
   transition: transform .1s ease;
   cursor: pointer;
}

button:hover{
   -webkit-transform: scale(1.18);
   transform: scale(1.18);
}
<ul id="lista">
   <li>
      <a class="links" href="#">
         <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/Dracula_One_Sheet_Style_F.jpg/220px-Dracula_One_Sheet_Style_F.jpg">
         Título
      </a>
   </li>
</ul>
<div style="background: gray;">
   <a href="#">Link qualquer</a>
   <button>Botão qualquer</button>
</div>

Browser other questions tagged css3

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