How to make a Div with higher z-index not affect anchor below

[wongadob]

I have a div that is semi transparent and displays a counter above an icon which I need to be clickable. The counter takes up about 3/4 of the image when visible. However it is preventing the icon below from being selected when clicked on as the new div area is blocking the click. Is there any way that you can make the div invisible to the mouse click too so it will select the icon(anchor) underneath?

[dsonesuk]

Give the container position: relative;, with icon background-image, with counter inside overlapping icon, create anchor and make it display: block; position: absolute; top:0; left: 0; right:0; bottom:0;, this will overlap both icon image and counter, but you may have to adjust z-index; to fully overlap.

[wongadob]

Sorry but not sure that I understand that, The container has to be at a fixed position. it is 34 pixels from the top and 5 in from the right. (top right corner of the page). This is the code so you understand what it is doing (if you didn't already)

    <div id = "iconslist">	 <ul>	  <li> <a href ="display-notifications.html"> <img id = "icon-note" src = "art/icon-notification.png" alt = "Notifications"/></a></li>	  <li> <a href ="display-private.html"> <img id = "icon-privmess" src = "art/icon-messages.png" alt = "messages"/></a></li>	  <li> <a href ="display-groupselect.html"> <img id = "icon-grp" src = "art/icon-group.png" alt = "Logout"/></a></li>	  <li> <a href ="index.html"> <img src = "art/icon-home.png" alt = "Logout"/></a></li>	 </ul>    </div>    <div id = "unread_container">	 <div id = "unreadbox_notifications" class = "unread_box"><span id = "unread_notifications" data-bind = "text: cntNotifications"></span></div>	 <div id = "unreadbox_private" class = "unread_box"><span id = "unread_private" data-bind = "text: cntPrivate"></span></div>	 <div id = "unreadbox_group" class = "unread_box"><span id = "unread_group" data-bind = "text: cntGroup"></span></div>    </div>

Then the css is as follows...

#iconbar ul {  margin-right: 5px;  margin-top:1px;}#iconbar li {  list-style-type: none;  float: right;  border: 0;}#iconbar a {  display: block;  border: 0;}#iconbar a img {  border: 0;}#iconbar a:active, a:link, a:hover, a:visited {  border: 0;}#unread_container{position: fixed;z-index:100;clear: right;float: right;top: 34px;right: 5px;height: 12px;font-size: x-small;}.unread_box{float: right;width: 20px;margin-left: 19px;margin-right: 5px;background-color: red;opacity:0.7;color: white;border-radius:2px;text-align:center;}

so there are 3 icons all floated right with fixed widths

[dsonesuk]

??? iconbar or iconslist, anyway changed it to iconbar for this, in this situation it would be easier to us jquery to hide the counter when icon hovered over

$(document).ready(function(){$("#iconbar").hover(function(){$("#unread_container").hide()},function(){$("#unread_container").show();});});

The other way would be apply position: relative; to li elements then remove the image from anchor link element, and place it beside it so anchor element it is now empty, you then make the anchor links the same size as images, and use position: absolute to place these above the respective image, AND the counter by using a higher z-index,

[wongadob]

Thanks, think I may have to add the new invivible divs with higher z-values, thanks.

[bigzer]

Thank you this helped solve my problem.