{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Root（大扎） 的问题《Outline applied to an anchor containing an image i》','https://www.manongdao.com/q-539986.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
For a site I'm working on, I'd like to have a dotted outline appear around links when they are focused/hovered/active. I'd like this to happen for text and image links.
The issue I have is that whilst my code works great in Firefox and IE, in Chrome 7.0.517.41 the dotted outline is the same height as my text, not the height of the image.
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
BODY { font: 15px/1.5 sans-serif; }
a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
</style>
</head>
<body>
<a href="#">
<img src="http://sstatic.net/stackoverflow/Img/wmd-buttons.png" />
</a>
</body>
</html>
This is annoying. As a workaround I use javascript to apply a class to distinguish anchors containing images, and ensure that the outline for anchors containing images is applied to the anchor, not the image:
a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
a:focus.img, a:hover.img, a:active.img { outline: none; }
a:focus img, a:hover img, a:active img { outline: 1px dotted #11aa22; }
And in my document ready
$('a:has(img)').addClass('img');
Is there a better way to do this?
You have to set links as blocks for they wrap images, as
eg.