wongadob Posted April 7, 2012 Share Posted April 7, 2012 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2012 Share Posted April 7, 2012 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. Link to comment Share on other sites More sharing options...
wongadob Posted April 8, 2012 Author Share Posted April 8, 2012 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 8, 2012 Share Posted April 8, 2012 ??? 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, Link to comment Share on other sites More sharing options...
wongadob Posted April 8, 2012 Author Share Posted April 8, 2012 Thanks, think I may have to add the new invivible divs with higher z-values, thanks. Link to comment Share on other sites More sharing options...
bigzer Posted June 29, 2014 Share Posted June 29, 2014 Thank you this helped solve my problem. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now