积极的作品，但不重点或目标使用css

所以下面是我的代码。 css块中的“active”命令起作用，因为当点击div时它会改变颜色，但是当放开点击时，它的边框应该变成红色，如css块中的“target”命令所示，但它不会。想法？积极的作品，但不重点或目标使用css

<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>

来源

2017-07-17 user5095266

我觉得你在做什么样的目标，https://developer.mozilla.org/en-US/docs/Web/CSS/:target都搞不清楚 – Huangism

您正在寻找:focus。

https://jsfiddle.net/s0L716zu/

HTML

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

CSS

.svar-grid .svar:focus { .... }

正如你可以看到我添加tabindex="-1"到div因为一个div是不是自然可成为焦点。给它-1 tabinde使得可获得焦点

这里是:target是应该做的https://developer.mozilla.org/en-US/docs/Web/CSS/:target，它是为了与URL中使用

我不知道为什么你需要专注于股利或是否有与它的任何交互。但是，如果有与DIV互动，你应该使用button或锚标记根据其使用

来源

2017-07-17 19:16:24 Huangism

:target适用于与id属性，它在URL中的第一个字符#后出现的字符串相匹配的元素。这就是说，当您链接到页面上的特定内容时，可以突出显示它以吸引人们的注意力。

由于元素没有id，因此:target伪类无法应用。

:focus适用于具有焦点的元素。点击一个元素通常会使它成为焦点......但只有当元素首先可以聚焦时。

聚焦的点是，使得不使用指点装置（如鼠标，触控板或触摸屏），则可以通过某些其它机制（例如，按下tab键）交互式控件之间移动与用户界面进行交互时。然后你就可以触发（例如通过按Enter键）聚焦元素。

这只有在触发时元件执行一些（例如，如果它是一个链接或按钮）。默认情况下，div不会在触发时执行任何操作。它是一个通用的容器。

您可以添加交互元素使用JavaScript（addEventListener），你可以标记元素为使用tabindex属性互动......但你通常应该选择不同的元素（如<button>）来代替。

来源

2017-07-17 19:17:00 Quentin

积极的作品，但不重点或目标使用css

回答

相关问题