How to get rid of black hover over menu items

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Hello,

    What is the CSS to get rid of the black hover shading over my menu items?

    Thanks,
    Sarah

    The blog I need help with is: (visible only to logged in users)

  • staff-happychia · Staff · 
    #page #access li:hover > a {
	background: none;
	color: red
}

    You also want to change the text color to something that is not white because removing the black hover will make the current white text invisible.

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Thanks – I should have mentioned, but i’m working on a new layout of my blog and have a long set of CSS to make the amends. Within that CSS I have replaced the menu items with images. When I use the CSS you provide it makes the pictures disappear when hovered over. I just want them to remain and the the hand cursor to appear.

    How would I go about doing this?

    Thanks,
    Sarah

  • staff-happychia · Staff ·

    Could you please add the images to the menu? Right now there are no images. We can work on the required style once there are images in place.

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    I can’t as it is part of a new redesign and I don’t want to publish it yet. If you use the above code you will see the images and the issue. Does that make sense?

  • staff-happychia · Staff ·

    Interesting. I still can’t find any images set to the menu items.

    The above CSS is only removing the background and setting the text color to red on hover.

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    Oops! Here you go…

    #access li {
    background:#B8DCE6;
    margin-top:10px;
    height:23px;
    width: 100px;
    }

    #menu-item-4572:before, #menu-item-4590:after {
    content:””;
    position:absolute;
    display:block;
    border:21px solid #B8DCE6;
    top:0.2px;
    }

    #menu-item-4572:before {
    left:-28.71em;
    border-right-width:0.4em;
    border-left-color:transparent;
    }

    #menu-item-4590:after {
    right:-28.71em;
    border-left-width:0.4em;
    border-right-color:transparent;
    top: 0.2px;
    }

    #menu-item-4572 a {
    text-align: left;
    text-indent: -9999px;
    background: url(“https://daisychainsanddreamers.files.wordpress.com/2015/01/home200x80px.jpg”) no-repeat;
    background-size: 65%;
    width: 162px;
    height: 57px;
    margin-top: -8.9px;
    margin-left: -60px;
    }

    #menu-item-4574 a {
    text-align: left;
    text-indent: -9999px;
    background: url(“https://daisychainsanddreamers.files.wordpress.com/2015/01/about200x80px.jpg”) no-repeat;
    background-size: 65%;
    width: 162px;
    height: 57px;
    margin-top: -8.9px;
    margin-left: -30px;
    }

    #menu-item-4590 a {
    text-align: left;
    text-indent: -9999px;
    background: url(“https://daisychainsanddreamers.files.wordpress.com/2015/01/categories200x80px.jpg”) no-repeat;
    background-size: 65%;
    width: 255px;
    height: 57px;
    margin-top: -8.9px;
    margin-left: -0px;
    }

    #menu-item-4581 a {
    text-align: left;
    text-indent: -9999px;
    background: url(“https://daisychainsanddreamers.files.wordpress.com/2015/01/lifestylemenu.jpg”) no-repeat;
    background-size: 50%;
    width: 164px;
    height: 57px;
    }

    #menu-item-4580 a {
    text-align: left;
    text-indent: -9999px;
    background: url(“https://daisychainsanddreamers.files.wordpress.com/2015/01/beautymenu.jpg”) no-repeat;
    background-size: 40%;
    width: 128px;
    height: 57px;
    }

    #menu-item-4579 a {
    text-align: left;
    text-indent: -9999px;
    background: url(“https://daisychainsanddreamers.files.wordpress.com/2015/01/diymenu.jpg”) no-repeat;
    background-size: 15%;
    }

    #menu-item-4582 a {
    text-align: left;
    text-indent: -9999px;
    background: url(“https://daisychainsanddreamers.files.wordpress.com/2015/01/fashionmenu.jpg”) no-repeat;
    background-size: 40%;
    }

  • staff-happychia · Staff ·

    I am sorry, but adding this lengthy CSS is making your menu look pretty bad.

    It does not even look like a menu, it is just some tiles of images without text.

  • Unknown's avatar
    daisychainsanddreamers · Member ·

    That’s odd. I did only send you a snippet of the code so this could be why. Plus I have edited the whole site so you’ll be seeing some stand alone content which would look weird out of context. However that code should have provided three images that include text to replace the menu items. I have a new nav bar that blends into the images seamlessly but you’ll just be seeing them plonked on top of my existing one.

    Do you have any idea as to how to get rid of the hover black?

    Thanks

  • staff-happychia · Staff ·

    The images in the CSS you pasted: https://daisychainsanddreamers.files.wordpress.com/2015/01/home200x80px.jpg does not exist.

    Could you make few of the available?

    I added the following code and adjusted height and margin-top which displayed a gray empty image in place of Home menu item ( #menu-item-4572 ).

    #menu-item-4572 a {
text-align: left;
text-indent: -9999px;
background: url("https://daisychainsanddreamers.files.wordpress.com/2015/01/home200x80px.jpg") no-repeat;
background-size: 65%;
width: 162px;
height: 40px;
margin-top: 8.9px;
margin-left: -60px;
}

    Do you have any idea as to how to get rid of the hover black?

    This is how: 

    #page #access li:hover > a {
	background: none;
	color: red
}
  • The topic ‘How to get rid of black hover over menu items’ is closed to new replies.