CODEWITHSUNDEEP
htmlcss
Aaron Wilson
Aaron Wilson

Reputation: 21

Getting closer to the exact CSS hover I'm trying to achieve, but more help is needed

I further tweaked it off of a member's suggestion. I'm now trying to figure out with this new CSS setting for the hover state, what is causing the text to kick down so much? I was messing with the line height, but that seemed to shrink and scale the background image as well...?

I'm trying to get the exact css positioning on the css hover, as on the nav bar buttons normal up state. Just a "flip of colors".

Upon further inspection of the mouse over on each button's "up state", I noticed that the hover occurs when I mouseover the text link portion of the button. I want the whole button area to be clickable. I have to figure out why that's not occurring either.

Help is appreciated

Here is what I have so far...

example:

http://visionsic.github.io/DSW_II/test.html

CSS & HTML CODE:

#aside_sect_mm {
  margin: 0%;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  max-height: 100%;
  margin-top: 0%;
  display: block;
  position: absolute;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: absolute;
  padding: 6.5% 0% 0% 0%;
  height: 100px;
  width: 60px;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 100px;
  max-width: 60px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 100px 40px;
  display: block;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  clear: left;
  position: relative;
  display: block;
  max-height: 60px;
  text-decoration: none;
  color: #F6EF1B;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
  position: relative;
  display: block;
  background-repeat: no-repeat;
  background-color: #F6EF1B;
  background-size: 100% 50%;
  text-decoration: none;
  line-height: 2em;
  margin-top: -47px;
  padding-top: 50px;
  color: #004E27;
  overflow: hidden;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>nav bar test</title>
  <link href="css/test.css" rel="stylesheet" type="text/css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

Upvotes: 0

Views: 138

Answers (1)

Jamie Barker
Jamie Barker

Reputation: 8246

You've overcomplicated it. The css hover can be applied to LI instead the A:

Example if the code snippet doesn't work

svg/fut_ore_ylw.svg #aside_sect_mm {
    margin: 0%;
    background-position: 0%;
    background-color: #004E27;
    max-width: 704px;
    max-height: 100px;
    background-repeat: no-repeat;
    position: relative;
}
#aside_sect_mm nav {
    text-align: center;
    max-width: 704px;
    width: 100%;
    max-height: 100%;
    margin-top: 0%;
    display: block;
    position: absolute;
}
#aside_sect_mm nav:after {
    content:"";
    display: table;
    clear: both;
}
#aside_sect_mm nav ul {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    position: relative;
}
#aside_sect_mm nav ul li {
    font-size: 1.1em;
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-weight: lighter;
    text-align: center;
    list-style: none;
    line-height: 1.1em;
    position: absolute;
    padding: 6.5% 0% 0% 0%;
    height: 100px;
    width: 60px;
    color: #FCE011;
    display: inline-block;
    float: left;
    min-width: 20%;
    background-color: #004E27;
    overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon, #aside_sect_mm nav ul li.stat_icon, #aside_sect_mm nav ul li.img_icon, #aside_sect_mm nav ul li.vid_icon, #aside_sect_mm nav ul li.fut_icon {
    position: relative;
    max-height: 100px;
    max-width: 60px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: 100px 40px;
    display: block;
    overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
    background-image: url(http://visionsic.github.io/DSW_II/svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
    background-image: url(http://visionsic.github.io/DSW_II/svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
    background-image: url(http://visionsic.github.io/DSW_II/svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
    background-image: url(http://visionsic.github.io/DSW_II/svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
    background-image: url(http://visionsic.github.io/DSW_II/svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a, #aside_sect_mm nav ul li.stat_icon a, #aside_sect_mm nav ul li.img_icon a, #aside_sect_mm nav ul li.vid_icon a, #aside_sect_mm nav ul li.fut_icon a {
    clear: left;
    position: relative;
    display: block;
    max-height: 60px;
    text-decoration: none;
    color: #F6EF1B;
    overflow: auto;
}
#aside_sect_mm nav ul li:hover {
    background-color: #F6EF1B;    
}
#aside_sect_mm nav ul li:hover a {
    color: #004E27;
    cursor:pointer;
}
#aside_sect_mm nav ul li.bio_icon:hover {
    background-image: url(http://visionsic.github.io/DSW_II/svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon:hover {
    background-image: url(http://visionsic.github.io/DSW_II/svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon:hover {
    background-image: url(http://visionsic.github.io/DSW_II/svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon:hover {
    background-image: url(http://visionsic.github.io/DSW_II/svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon:hover {
    background-image: url(http://visionsic.github.io/DSW_II/svg/fut_ore_grn.svg);
}
<section id="aside_sect_mm">
    <nav>
        <ul>
            <li class="bio_icon"><a href="#bio">Bio</a>

            </li>
            <li class="stat_icon"><a href="#stats">Stats</a>

            </li>
            <li class="img_icon"><a href="#images">Images</a>

            </li>
            <li class="vid_icon"><a href="#videos">Videos</a>

            </li>
            <li class="fut_icon"><a href="#future">Future</a>
            </li>
        </ul>
    </nav>
</section>

Upvotes: 3

Related Questions