blocks|key|4565570|text|您可以尝试使用:focus伪类。请注意，您将需要tabindex使您的div可聚焦。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4565571|​|4565572|div+{
++++background:+#ccc;
++++margin:+20px;
}
div:focus+{
++++outline:+1px+solid+blue;
}|code-block|syntax|javascript|4565573|<div+tabindex="-1">1</div>
<div+tabindex="-1">2</div>
<div+tabindex="-1">3</div>|4565574|4565575|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute^0|7|6|O|8|Z|3|O|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>You can try <code>:focus</code> pseudo-class. Note you will need <a href="http://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute"><code>tabindex</code></a> to make your <code>div</code>s focusable.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background: #ccc;
    margin: 20px;
}
div:focus {
    outline: 1px solid blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div tabindex="-1"&gt;1&lt;/div&gt;
&lt;div tabindex="-1"&gt;2&lt;/div&gt;
&lt;div tabindex="-1"&gt;3&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|59298|text|另一种使用CSS的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|59299|input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus+{
++++outline:+1px+solid+blue;
}|code-block|syntax|javascript|59300|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Another approach using CSS:</p>

<pre class="lang-css prettyprint-override"><code>input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
    outline: 1px solid blue;
}
</code></pre>


blocks|key|59228|text|您尝试过使用事件吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|59229|​|59230|function+selected(pDiv)+{
++++$("#div"+%2B+pDiv).attr("style",+"border-style:+solid");
++++//+Here+write+a+For+Loop+to+put+"border-style:+none"+to+everyone+else
}|code-block|syntax|javascript|59231|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div+id="div1"+onclick="selected(1)">1</div>
<div+id="div2"+onclick="selected(2)">2</div>
<div+id="div3"+onclick="selected(3)">3</div>|59232|59233|让我知道它是否起作用。|59234|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Have you tried using events?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function selected(pDiv) {
    $("#div" + pDiv).attr("style", "border-style: solid");
    // Here write a For Loop to put "border-style: none" to everyone else
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div id="div1" onclick="selected(1)"&gt;1&lt;/div&gt;
&lt;div id="div2" onclick="selected(2)"&gt;2&lt;/div&gt;
&lt;div id="div3" onclick="selected(3)"&gt;3&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Let me know if it worked...</p>


blocks|key|59256|text|正如我在other+answer中所说的，您可以使用:focus伪类。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|59257|但有一个问题:如果元素包含其他可聚焦的元素，它将无法工作。|59258|但是，可以使用JS事件来修复：|59259|​|59260|var+els+=+document.body.children;
for(var+i=0;+i<els.length;+%2B%2Bi)+{
++++els[i].addEventListener('focus',+focus,+true);
++++els[i].addEventListener('blur',+blur,+true);
}
function+focus()+{
++++this.classList.add('focus');
}
function+blur()+{
++++this.classList.remove('focus');
}|code-block|syntax|javascript|59261|div+{
++++background:+#ccc;
++++margin:+20px;
}
div:focus,+div.focus+{+/*+:focus+is+a+fallback+in+case+JS+is+disabled+*/
++++outline:+1px+solid+blue;
}|59262|<div+tabindex="-1">
++++1
++++<input+/>
</div>
<div+tabindex="-1">2</div>
<div+tabindex="-1">3</div>|59263|59264|请注意，在上面的代码中，我使用了捕获阶段，因为focus和blur不会冒泡。|59265|或者，可以使用focusin和focusout，但请注意，Firefox还不支持它们(但如果您使用jQuery，它们将会工作)。|59266|59267|$('body+>+div').on('focusin',+function()+{
++++$(this).addClass('focus');
}).on('focusout',+function()+{
++++$(this).removeClass('focus');
});|59268|div+{
++++background:+#ccc;
++++margin:+20px;
}
div:focus,+div.focus+{+/*+:focus+is+a+fallback+in+case+JS+is+disabled+*/
++++outline:+1px+solid+blue;
}|59269|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div+tabindex="-1">
++++1+<input+/>
</div>
<div+tabindex="-1">2</div>
<div+tabindex="-1">3</div>|59270|59271|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/26531702/1529630^0|Q|6|4|C|0|0|0|0|0|0|0|0|0|N|5|T|4|0|7|7|F|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|F|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1M|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1N|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1O|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1P|8|@]|D|@]|E|$O|P]]|$1|S|3|T|5|N|7|1Q|8|@]|D|@]|E|$O|P]]|$1|U|3|K|5|6|7|1R|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1S|8|@$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1X|8|@$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]]|D|@]|E|$]]|$1|Z|3|K|5|6|7|22|8|@]|D|@]|E|$]]|$1|10|3|11|5|N|7|23|8|@]|D|@]|E|$O|P]]|$1|12|3|13|5|N|7|24|8|@]|D|@]|E|$O|P]]|$1|14|3|15|5|N|7|25|8|@]|D|@]|E|$O|P]]|$1|16|3|K|5|6|7|26|8|@]|D|@]|E|$]]|$1|17|3|-4|5|6|7|27|8|@]|D|@]|E|$]]]|18|$19|$5|1A|1B|1C|E|$1D|1E]]]]

<p>As I said in my <a href="https://stackoverflow.com/a/26531702/1529630">other answer</a>, you can use <code>:focus</code> pseudo-class.</p>

<p>But there is a problem: it won't work if the elements contain other focusable elements.</p>

<p>However, it can be fixed using JS events:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var els = document.body.children;
for(var i=0; i&lt;els.length; ++i) {
    els[i].addEventListener('focus', focus, true);
    els[i].addEventListener('blur', blur, true);
}
function focus() {
    this.classList.add('focus');
}
function blur() {
    this.classList.remove('focus');
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background: #ccc;
    margin: 20px;
}
div:focus, div.focus { /* :focus is a fallback in case JS is disabled */
    outline: 1px solid blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div tabindex="-1"&gt;
    1
    &lt;input /&gt;
&lt;/div&gt;
&lt;div tabindex="-1"&gt;2&lt;/div&gt;
&lt;div tabindex="-1"&gt;3&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Note that in the code above I used capture phase because <code>focus</code> and <code>blur</code> don't bubble.</p>

<p>Alternatively, <code>focusin</code> and <code>focusout</code> could be used instead, but be aware Firefox doesn't support them yet (but they will work if you use jQuery).</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('body &gt; div').on('focusin', function() {
    $(this).addClass('focus');
}).on('focusout', function() {
    $(this).removeClass('focus');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background: #ccc;
    margin: 20px;
}
div:focus, div.focus { /* :focus is a fallback in case JS is disabled */
    outline: 1px solid blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div tabindex="-1"&gt;
    1 &lt;input /&gt;
&lt;/div&gt;
&lt;div tabindex="-1"&gt;2&lt;/div&gt;
&lt;div tabindex="-1"&gt;3&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|59352|text|您所需要做的就是使用focus而不是hover。:focus选择器用于选择具有焦点的元素。它允许在接受键盘事件或其他用户输入的元素上使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|59353|这两个元素之间的不同之处在于，hover事件侦听鼠标相对于网页的位置，而focus事件侦听页面中选定的项。|59354|因此，您的代码可能如下所示：|59355|​|59356|div+{
++++background:+#ccc;
++++margin:+20px;
}
div:focus+{
++++outline:+1px+solid+blue;
}|code-block|syntax|javascript|59357|<div+tabindex="-1">1</div>
<div+tabindex="-1">2</div>
<div+tabindex="-1">3</div>|59358|59359|entityMap^0|A|5|I|5|O|6|0|F|5|10|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|18|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|19|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1A|8|@]|D|@]|E|$O|P]]|$1|S|3|K|5|6|7|1B|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|U|$]]

<p>All you need to do is use <code>focus</code> instead of <code>hover</code>. The <code>:focus</code> selector is used to select the element that has focus. It is allowed on elements that accept keyboard events or other user inputs.</p>
<p>The difference between the two elements is that the <code>hover</code> event listens for the position of the mouse in relation to the web page, while the <code>focus</code> event listens for the selected item in the page.</p>
<p>So your code could look something like this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background: #ccc;
    margin: 20px;
}
div:focus {
    outline: 1px solid blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div tabindex="-1"&gt;1&lt;/div&gt;
&lt;div tabindex="-1"&gt;2&lt;/div&gt;
&lt;div tabindex="-1"&gt;3&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|59364|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|59365|/*
+Fix+select+next+previuos+selected
+Fix+duplicate+clicks+diselect
*/
var+valuesOld+=+new+Array();
var+num+=+0;

function+selected(pDiv)+{
++++num+=+num+%2B1;
++++valuesOld[num]+=+pDiv;
++++console.log("Key"%2Bnum%2B"Value="%2BvaluesOld[num]);

++++$("#div"+%2B+pDiv).css("border-left",+"+1px+solid+rgb(133,+189,147)");

++++if(valuesOld[2]+>+0+&&+valuesOld[1]>+0){
++++++++$("#div"+%2B+valuesOld[num-1]).css("border-left",+"+1px+solid+rgb(221,+84,+84)");
++++}
++++++++if(pDiv+==+valuesOld[num]){
++++++++$("#div"+%2B+pDiv).css("border-left",+"+5px+solid+rgb(133,+189,+147)");
++++}
}|code-block|syntax|javascript|59366|div{
++border-left:+1px+solid+rgb(221,+84,+84);
++margin-top:+2px;
}|59367|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div+onclick="selected(1)"+id="div1">1</div>
<div+onclick="selected(2)"+id="div2">2</div>
<div+onclick="selected(3)"+id="div3">3</div>|59368|59369|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/*
 Fix select next previuos selected
 Fix duplicate clicks diselect
*/
var valuesOld = new Array();
var num = 0;

function selected(pDiv) {
    num = num +1;
    valuesOld[num] = pDiv;
    console.log("Key"+num+"Value="+valuesOld[num]);

    $("#div" + pDiv).css("border-left", " 1px solid rgb(133, 189,147)");

    if(valuesOld[2] &gt; 0 &amp;&amp; valuesOld[1]&gt; 0){
        $("#div" + valuesOld[num-1]).css("border-left", " 1px solid rgb(221, 84, 84)");
    }
        if(pDiv == valuesOld[num]){
        $("#div" + pDiv).css("border-left", " 5px solid rgb(133, 189, 147)");
    }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div{
  border-left: 1px solid rgb(221, 84, 84);
  margin-top: 2px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;
&lt;/script&gt;
&lt;div onclick="selected(1)" id="div1"&gt;1&lt;/div&gt;
&lt;div onclick="selected(2)" id="div2"&gt;2&lt;/div&gt;
&lt;div onclick="selected(3)" id="div3"&gt;3&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I need to change the outline color when the div is selected. I have tried by using the same technique as hover (shown below), but I need help with a selector. Is it possible via JavaScript or is CSS enough?</p>

<p>Here is what I tried:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background: #ccc;
    margin: 20px;
}
div:hover {
    outline: 1px solid blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
&lt;div&gt;3&lt;/div&gt;</code></pre>
</div>
</div>
</p>


How to change a div's outline color when selected?

当div被选中时，我需要更改轮廓颜色。我尝试过使用与hover相同的技术(如下所示)，但我需要一个选择器的帮助。可以通过JavaScript实现吗?还是CSS就足够了？这是我尝试过的：​div {    background: #ccc;    margin: 20px;}div:hover {    outline: 1px solid blue;}<div>1</div><div>2</div

问如何在选中时更改div的轮廓颜色？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在选中时更改div的轮廓颜色？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在选中时更改div的轮廓颜色？
EN