自定义焦点轮廓与div里面的链接 [英] Custom focus outline for links with div inside
问题描述
我的任务是改变当前有焦点的元素（链接，按钮等）的焦点轮廓（使其高度可见）。
该网站与复杂的内容有很多链接。链接元素中的div是常见的。但据我了解，链接元素中的div在html5中是可以的（请纠正我，如果我错了）。
如果我保留默认大纲（例如a在Firefox中虚线），它在大多数浏览器（不是IE）中工作正常。它将显示在链接的边界周围。但是，如果我应用自己的大纲，它开始表现得很怪异： / li>
都没有大纲（即使我保留默认值也不行）
完全没有提纲。
div的链接完全没有提纲。
上午我做错了什么？
下面是一个例子：
< ！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< title> Test 3< / title>
< style>
.custom-focus：focus {
outline：＃fa0 solid 2px;
}
< / style>
< / head>
< body>
< a href =＃>链接A1（仅包含文字的链接，默认焦点大纲）< / a>
< br />
< a href =＃class =custom-focus>链接A2（仅包含文字链接，自定义焦点大纲）< / a>
< br />
< a href =＃>
< div>链接B1（链接内部div，默认焦点大纲）< / div>
< / a>
< br />
< a href =＃class =custom-focus>
< div>链接B2（链接内部div，自定义焦点大纲）< / div>
< / a>
< / body>
< / html>
我也用相同的代码创建了一个JS小提琴： https://jsfiddle.net/5jar7ma5/3/
.custom-focus {display：inline-block
检查是否将css显示更改为inline-block ; }.custom-focus：focus {outline：＃fa0 solid 2px; }
I've been tasked with changing the focus outline for the element (link, button, etc…) that currently has the focus (making it highly visible).
The site has a lot of links with complex content. Divs within the link elements are common. But as I understand it, divs within link elements are ok in html5 (please correct me if I'm wrong).
If I keep the default outline (for example a dotted line in firefox), it works fine in most browser (not IE). It will be shown around the border of the link. But if I apply my own outline it starts behaving very weird:
- Google Chrome: The link containing a div get no outline at all.
- Firefox: The outline is shown, but the shape of it looks really weird.
- Internet Explorer: The link containing a div get no outline at all (not even if I leave the default on).
- Microsoft Edge: The link containing a div get no outline at all.
- Opera: The link containing a div get no outline at all.
Am I doing something wrong?
Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test 3</title>
<style>
.custom-focus:focus {
outline: #fa0 solid 2px;
}
</style>
</head>
<body>
<a href="#">Link A1 (Link with just text, default focus outline)</a>
<br />
<a href="#" class="custom-focus">Link A2 (Link with just text, custom focus outline)</a>
<br />
<a href="#">
<div>Link B1(Link with div inside, default focus outline)</div>
</a>
<br />
<a href="#" class="custom-focus">
<div>Link B2(Link with div inside, custom focus outline)</div>
</a>
</body>
</html>
I've also created a JS fiddle with the same code: https://jsfiddle.net/5jar7ma5/3/
Check if changing the css display to "inline-block" will do the trick.
.custom-focus { display:inline-block; } .custom-focus:focus { outline: #fa0 solid 2px; }
这篇关于自定义焦点轮廓与div里面的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
