Soon need to stay on top of menu but menu is not clickable

Asked

Viewed 81 times

0

inserir a descrição da imagem aquiWhen I mouse over the menu the property 'onMouseOver' is not active because the logo needs to be in front, how can I resolve it? The menu with the property 'onMouseOver' decreases the size as well. thanks if anyone can help.

Farra Certa

body {
    border: 0px;
}

div#header {
    background-image:url(../../../Documents/Sites/SiteFarraCerta/images/backgroundheader.jpg);
    background-repeat:repeat-x;
    height: 1500px;
    width: 1280px;
    position:absolute;
    top: 0px;
    left: 50%;
    margin-left: -640px;
}

img#logo {
height: 254px;
width: 373px;
position: absolute;
left: 50%;
margin-left: -186px;
z-index: 3;
}

img#box {
    height: 43px;
    width: 129px;
    position:absolute;
    top: 140px; 
    left: 50%;
    margin-left: -87px;
    display:block;
    z-index: 1;
}

img#servicosbox {
    height: 43px;
    width: 129px;
    position: absolute;
    top: 140px;
    left: 682px;
    display:block;
    z-index: 1;
    }

img#agendabox {
height: 43px;
width: 129px;
position: absolute;
top: 140px;
left: 424px;
display: block;
z-index: 1;
    }

img#contatobox {
    height: 43px;
    width: 129px;
    position: absolute;
    top: 140px;
    left: 811px;
    display:block;
    z-index: 1;
    }

img#homebox {
    height: 43px;
    width: 129px;
    position: absolute;
    top: 140px;
    left: 295px;
    display:block;
    z-index: 1;
    }
javascript html css

  • See if that’s what you’re looking for: Transparent gradient superimposing <div> without losing the "click"

  • Can I send you his link to get a better understanding? I don’t understand exactly, I think I know how to solve it, but I don’t know if that’s exactly it, you want a menu that changes when you put the cursor on top of it but at the same time the logo is on top of the menu? would be a transparent menu on top of the logo or logo as menu background?

  • I added a photo to better understand, I haven’t hosted it

1 answer

2

Add the method pointer-events: none; in the class of your logo, in your case would look like this: 

img#logo {
height: 254px;
width: 373px;
position: absolute;
left: 50%;
margin-left: -186px;
z-index: 3;
pointer-events: none;
}

See how it works: http://jsfiddle.net/LNwHV/1/

Works on all browsers except IE10 down.

I hope I’ve helped ;)

Browser other questions tagged javascript html css

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