首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在选中时更改div的轮廓颜色?

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

Stack Overflow用户
提问于 2014-10-23 23:28:21
回答 6查看 32K关注 0票数 21

当div被选中时,我需要更改轮廓颜色。我尝试过使用与hover相同的技术(如下所示),但我需要一个选择器的帮助。可以通过JavaScript实现吗?还是CSS就足够了?

这是我尝试过的:

代码语言:javascript
复制
div {
    background: #ccc;
    margin: 20px;
}
div:hover {
    outline: 1px solid blue;
}
代码语言:javascript
复制
<div>1</div>
<div>2</div>
<div>3</div>

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2014-10-23 23:29:59

您可以尝试使用:focus伪类。请注意,您将需要tabindex使您的div可聚焦。

代码语言:javascript
复制
div {
    background: #ccc;
    margin: 20px;
}
div:focus {
    outline: 1px solid blue;
}
代码语言:javascript
复制
<div tabindex="-1">1</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>

票数 34
EN

Stack Overflow用户

发布于 2014-10-26 17:34:09

另一种使用CSS的方法:

代码语言:javascript
复制
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
    outline: 1px solid blue;
}
票数 2
EN

Stack Overflow用户

发布于 2014-10-23 23:42:15

您尝试过使用事件吗?

代码语言:javascript
复制
function selected(pDiv) {
    $("#div" + pDiv).attr("style", "border-style: solid");
    // Here write a For Loop to put "border-style: none" to everyone else
}
代码语言:javascript
复制
<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>

让我知道它是否起作用。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26531663

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档