我正在開(kāi)發(fā)一個(gè)項(xiàng)目，考慮到網(wǎng)絡(luò)可訪問(wèn)性。代碼：function removeBorder(){li=document.getElementById("link");li.classList.add(".remove")}body{ background:#dddddd;}p:focus{ border:1px solid red;}li{ list-style-type:none; font-size:1rem padding:30px;}a{text-decoration:none;}a:focus{ border:1px solid red; border-radius:2px;}a:hover{ background:orange;}.remove{border:none;}<html> <head>Borders </head> <body> <p tabindex="0"> Click one the page. Then use TAB to navigate the list items</p><ul aria-role="list"> <li aria-role="listitem"><a id="link" onclick="removeBorder()" tabindex="0" href="#">Item One</a></li> <li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Two</a></li> <li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Three</a></li> </ul> </body> </html>我有兩組用戶。1.普通用戶當(dāng)我將鼠標(biāo)懸停在元素上時(shí)，在本例中為“l(fā)i”，我看到橙色的背景色。問(wèn)題：當(dāng)我單擊該元素時(shí)，出現(xiàn)紅色邊框。有沒(méi)有一種方法可以讓我們僅在使用選項(xiàng)卡聚焦時(shí)才具有邊框，而在單擊時(shí)則不具有邊框？單擊時(shí)如何刪除邊框？2.僅鍵盤(pán)用戶當(dāng)我們用選項(xiàng)卡聚焦時(shí)沒(méi)問(wèn)題，邊框按預(yù)期顯示紅色。
1 回答
莫回?zé)o
TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
function removeBorder(){
li=document.getElementById("link");
li.classList.add(".remove")
}
body{
background:#dddddd;
}
p:focus{
border:1px solid red;
}
li{
list-style-type:none;
font-size:1rem
padding:30px;
}
a{
text-decoration:none;
}
a:focus:hover{
border:1px solid red;
border-radius:2px;
}
a:hover{
background:orange;
}
.remove{
border:none;
}
<html>
<head>Borders
</head>
<body>
<p tabindex="0">
Click one the page. Then use TAB to navigate the list items</p>
<ul aria-role="list">
<li aria-role="listitem"><a id="link" onclick="removeBorder()" tabindex="0" href="#">Item One</a></li>
<li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Two</a></li>
<li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Three</a></li>
</ul>
</body>
</html>
您應(yīng)該同時(shí)添加焦點(diǎn)和懸停，它可以工作。
- 1 回答
- 0 關(guān)注
- 124 瀏覽
添加回答
舉報(bào)
0/150
提交
取消