CODEWITHSUNDEEP
htmlcss
Preston
Preston

Reputation: 2185

change <li> background when hover a

i have this menu:

<div class="nav">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">AMORTECIMENTO</a></li>
    </ul>
</div>

the normal apearance:

normal apearance

and this is the apearance when users hover the menu:

:hover apearance

So, i dont know how to setup the css, assuming i have biggest names on menu like: "AMORTECIMENTO"

Any tips??

i have tried this, but on small names, the menu is cutting the background...

.nav ul li a{
    display:block;
    font-size:15px;
    color:#000;
    padding:5px 7px;
    background:transparent;
    text-decoration:none;
}

.nav ul li:hover{
    background:url(../imagens/bola_fundo_menu.png) center no-repeat;
}

My intention is, when user hover the menu item, on the <li> background, apear the basketball, and on <a> tag, the background is going to #FFF but i have small and big names on menu, so i can't set width of <li> and <a> tags... i think

Upvotes: 0

Views: 4945

Answers (4)

Brian
Brian

Reputation: 2829

Here is a quick example using pseudo-elements: http://codepen.io/anon/pen/iwerJ

Using the exact HTML you originally posted, with CSS like this:

.nav { 
  background: #CCC; 
  font-family: Helvetica, Arial, sans-serif;
  line-height: 48px; 
  margin: 50px auto 0;
  width: 90%;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block; 
}

.nav ul li {
  float: left;
  font-size: 14px;
  list-style: none;
  padding: 0 10px;
  position: relative;
}
.nav ul li:hover:after {
    /* Replace background with image */
    background: #abc123;
    /* Optionally remove radius */
    border-radius: 30px;

    content: '';
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    margin-top: -30px; 
    margin-left: -30px;
    height: 60px; width: 60px;
}

.nav a {
  color: #333;
  display: inline-block;
  line-height: 180%;
  padding: 0 4px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
    .nav li:hover a { background: #FFF; }

Upvotes: 3

Dan
Dan

Reputation: 3367

Just set a hover background. Eg:

div.nav li:hover{
  background-image: url('basketball.jpg');
}

EDIT: You've got a lot more issues than just a background image...

  • You need to vertically center your nav text set a min-width for the nav cells so that the left and right of the ball aren't cut off
  • set a solid white background for the anchor tag so the text is actually visible on hover
  • set a z-index for the anchor tags that's greater than the center image so that they are all clickable (right now you can't click the link to the right of the center)

Good luck. I can't write all of that code out for you, but that should send you in the right direction.

Upvotes: 2

tuff
tuff

Reputation: 5153

To fix the cut-off images, you can simply put a min-width on your .nav li elements. Make sure the value is at least as wide as your background images.

You'll probably also want to add text-align: center.

Upvotes: 0

sokie
sokie

Reputation: 1986

on your nav class all you have to do is write your css like this:

.nav ul li:hover
{ 
background-image:url('yourimage.jpg');
}

Upvotes: 0

Related Questions