gpt4 book ai didi

html - 活跃的作品但不是使用 css 的焦点或目标

转载 作者:太空宇宙 更新时间:2023-11-03 22:38:28 25 4
gpt4 key购买 nike

下面是我的代码。 css block 中的“事件”命令起作用,因为当单击 div 时它会改变颜色,但是当放开单击时它的边框应该变为红色,如 css block 中的“目标”命令中所述,但事实并非如此。想法?

<html>
<body>

<style type="text/css">
.svar-grid {
margin: 20px;
}

.svar-grid .svar {

padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid black;
border-radius:10px;
background:yellowgreen;
}


.svar-grid .svar:active {

padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid black;
border-radius:10px;
background:green;
}

.svar-grid .svar:target {

padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid red;
border-radius:10px;
background:green;
}

</style>

<html>
<div>
<div class="svar-grid">
<div class="svar"><h4>Testing</h4></div>
</div>

</div>

最佳答案

:target适用于带有 id 的元素匹配第一个 # 之后出现的字符串的属性URL 中的字符。这就是当您链接到页面上的特定内容时,它可以突出显示以吸引眼球。

因为元素没有 id , :target伪类不能申请。


:focus适用于具有焦点的元素。单击一个元素通常会为其提供焦点……但前提是该元素首先是可聚焦的。

重点在于,在不使用指点设备(例如鼠标、触控板或触摸屏)的情况下与用户界面交互时,您可以通过其他机制(例如按 Tab 键)在交互控件之间移动。然后您可以触发(例如,通过按 Enter)焦点元素。

这仅在元素在触发时执行某些操作时才有用(例如,如果它是链接或按钮)。默认情况下,div 在触发时不会执行任何操作。它是一个通用容器

您可以使用 JavaScript ( addEventListener ) 向元素添加交互性,并且可以使用 tabindex 将元素标记为交互性属性……但您通常应该选择不同的元素(如 <button>)。

关于html - 活跃的作品但不是使用 css 的焦点或目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45151892/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com