HTML + CSS Structuring for Button Hover Effect

Question

HTML + CSS Structuring for Button Hover Effect

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

I have a listing of social networking icons, which I know how to do, I'm not here to ask how to do it, but rather, a more correct way to minimize my work, if there is one.

My HTML looks like this:

<ul>
  <li class="rodapeTitulos">Redes Sociais</li>
  <li class="icoFB"></li>
  <li class="icoTT"></li>
  <li class="icoIns"></li>
  <li class="icoPlu"></li>
  <li class="icoPin"></li>
</ul>

My CSS:

.icoFB{
  background-image: url("../imagens/fb.jpg");
  background-repeat: no-repeat;
  background-position: center 0;
  width: 43px;
  height: 43px;
  float: left;
  margin-right: 1px;
}

.icoFB:hover{background-position: center 43px;}

Okay, with this, the Facebook icon will change the position of the image with the Hover effect. Until then, I just do this same process for each of them, icoTT, icoIns ...

I would like to know if there is any easier way, maybe a class that stores the properties that will be repeated in all the divs, something like this:

.icoRodape{
    background-repeat: no-repeat;
    background-position: center 0;
    width: 43px;
    height: 43px;
    float: left;
    margin-right: 1px;
}
.icoRodape.icoFB{background-image: url("../imagens/fb.jpg");}
.icoRodape.icoTT{background-image: url("../imagens/tt.jpg");}
.icoRodape.icoIns{background-image: url("../imagens/inst.jpg");}
.icoRodape.icoPlu{background-image: url("../imagens/gpl.jpg");}
.icoRodape.icoPin{background-image: url("../imagens/pin.jpg");}
.icoRodape:hover{background-position: center 43px;}

Ok, this is not correct, just to give an even example. Is there any way to minimize my work and code?

html css

asked by anonymous 25.07.2014 / 20:58

2 answers

2

I usually create a class for all elements. In that case I would create .iconFooter and put in each li along with the class of each icon. In .iconFooter you put all the attributes that would repeat. I advise you to take a look at SASS or LESS that this will really save you a lot of work. I started using SASS in my projects and I tell you it was the best thing I did.

Another tip I give you, in this case, is to create a sprite with all the icons instead of using an image for each icon. You can set the background-position of each icon in your CSS with the normal position and hover. Take a look at link which is an essential tool for creating sprites.

Success with projects.

25.07.2014 / 21:53

Access Denied phpMyadmin error 2002 Problem with Syntax IF Shell Script

score 4 · Accepted Answer

I think it works like this, adding more than one class to the elements:

<ul>
  <li class="rodapeTitulos">Redes Sociais</li>
  <li class="icoRodape icoFB"></li>
  <li class="icoRodape icoTT"></li>
  <li class="icoRodape icoIns"></li>
  <li class="icoRodape icoPlu"></li>
  <li class="icoRodape icoPin"></li>
</ul>

Bootstrap uses this system.