Anentapygieta
New Member
I'm having a weird issue with IE. Basically I want to create a link that hovers over all the content in a box without actually wrapping the content with the link. In all browsers aside from IE this technique seems to work. When I hover in IE it gives me issues when I hover over the text. It loses the hover and only does the hover effect when your mouse is in the areas not filled with text. In my site I also have an image in the box, but for simplicity sake I removed it from my example. This happens in IE10 on down as well, so it's not an individual browser issue.In my example you'll notice that if you bring the mouse in from the side into the h3 text or p tag text it won't hover the link, but if you mouse into a blank area then over the text it'll hold the hover.HTML\[code\] <div class="boxWrapper"> <a href="http://stackoverflow.com/"></a> <h3>Title Goes Here</h3> <p>Content of box goes here</p> </div>\[/code\]CSS\[code\].boxWrapper {background:green;}a {position: absolute; height: 45px; width: 100%; z-index: 5; background: transparent; display:block;}a:hover {background:rgba(255,255,255,.3)}h3 {background:#aaa;}a:hover~h3 {background: #565659; position: relative; z-index: 1;}p {font-size: 18px; line-height: 26px; color: #6d6e71; position: relative; z-index: 1;}\[/code\]Here is my code example on jsfiddlehttp://jsfiddle.net/NZuK6/