Question

我需要在选择div时更改轮廓颜色。我尝试使用与悬停相同的技术（如下所示），但我需要帮助选择器。可以通过JavaScript或CSS足够吗？

以下是我的尝试：

div {
    background: #ccc;
    margin: 20px;
}
div:hover {
    outline: 1px solid blue;
}

<div>1</div>
<div>2</div>
<div>3</div>

Answer 1

您可以尝试:focus伪类。请注意，您需要tabindex才能使div成为焦点。

div {
    background: #ccc;
    margin: 20px;
}
div:focus {
    outline: 1px solid blue;
}

<div tabindex="-1">1</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>

Answer 2

正如我在other answer中所说，您可以使用:focus伪类。

但是存在一个问题：如果元素包含其他可聚焦元素，它将无法工作。

但是，可以使用JS事件修复它：

＆＃13;

var els = document.body.children;
for(var i=0; i<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');
}

＆＃13;

div {
    background: #ccc;
    margin: 20px;
}
div:focus, div.focus { /* :focus is a fallback in case JS is disabled */
    outline: 1px solid blue;
}

＆＃13;

<div tabindex="-1">
    1
    <input />
</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>

＆＃13;

请注意，在上面的代码中我使用了捕获阶段，因为focus和blur没有泡沫。

或者，可以使用focusin和focusout代替，但请注意Firefox还不支持它们（但是如果你使用jQuery它们会起作用）。

＆＃13;

$('body > div').on('focusin', function() {
    $(this).addClass('focus');
}).on('focusout', function() {
    $(this).removeClass('focus');
});

＆＃13;

div {
    background: #ccc;
    margin: 20px;
}
div:focus, div.focus { /* :focus is a fallback in case JS is disabled */
    outline: 1px solid blue;
}

＆＃13;

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

＆＃13;

Answer 3

使用CSS的另一种方法：

input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
    outline: 1px solid blue;
}

Answer 4

您是否尝试过使用活动？

＆＃13;

function selected(pDiv) {
    $("#div" + pDiv).attr("style", "border-style: solid");
    // Here write a For Loop to put "border-style: none" to everyone else
}

＆＃13;

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

＆＃13;

让我知道它是否有效......

Answer 5

/*
 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] > 0 && valuesOld[1]> 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)");
    }
}

div{
  border-left: 1px solid rgb(221, 84, 84);
  margin-top: 2px;
}

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

Answer 6

您需要使用focus代替hover。：焦点选择器用于选择具有焦点的元素。允许接受键盘事件或其他用户输入的元素。

两个元素之间的区别在于hover事件侦听鼠标相对于网页的位置，而focus事件则侦听页面中选定的项目。 / p>

所以你的代码看起来像这样：

div {
    background: #ccc;
    margin: 20px;
}
div:focus {
    outline: 1px solid blue;
}

<div tabindex="-1">1</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>

如何在选择时更改div的轮廓颜色？

6 个答案: