Question

基本上我有：

HTML：

<div class="div1">
  <div class="as-text-box" contenteditable="true"></div>
</div>

CSS：

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}
[contentEditable=true]:focus .div1{
    border:1px solid black;
}

准确地说，如果div1聚焦，我需要将as-text-box的边框颜色更改为黑色。

我也尝试过使用JQuery，但仍然没有运气。

JQuery的：

$(function(){
    if ($(".as-text-box").is(":focus")) {
        alert("Has Focus");
    } else {
        alert("Doesn't Have Focus");
    }
});

Jsfiddle：The best choice for comparing a register with zero is test reg, reg.

非常感谢所有的依赖。

Answer 1

您无法导航到css选择器上的父元素。你需要Javascript。

如果您希望父元素在子节点聚焦时更改边框，请将侦听器附加到可编辑div的blur和focus事件。

$(".as-text-box").on("focus", function() {
    $(".div1").addClass("focusClass");
});

$(".as-text-box").on("blur", function() {
    $(".div1").removeClass("focusClass");
});

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}

.div1.focusClass {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div1">
  <div class="as-text-box" contenteditable="true"></div>
</div>

Answer 2

你的选择器：

[contentEditable=true]:focus .div1

正在尝试选择类div1的元素，该元素是焦点的contentEditable元素的后代。这显然是向后的，因为.div1 div是contentEditable div的父级。

只需删除选择器的.div1部分就可以了：

＆＃13;

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}
[contentEditable=true]:focus{
	border:1px solid black;
  outline:none;
}

＆＃13;

<div class="div1">
  <div class="as-text-box" contenteditable="true">
  
  </div>
</div>

＆＃13;

如果您有其他原因需要在div1上选择，也可以撤销订单，但我觉得上述解决方案最简单，没有其他要求。

Answer 3

我相信您正在寻找自定义大纲css属性。

CSS

outline:none;

https://jsfiddle.net/2xn5rj2y/5/

如果你试图让父母有一个边框，那么jquery .parent（）。css（“border”，“1px solid＃000”）;会工作的。

Answer 4

没有办法通过css（选择父级）来实现，你可以通过jQuery实现事件focusin和focusout，你可以用父元素做你想做的事。

$('.as-text-box').on('focusin', function(){
  /** on focus, set border to a parent **/
  $(this).parent().css({'border':'1px solid black'});
}).on('focusout', function(){
  /** on lost focus, remove border **/
  $(this).parent().css({'border':''}); 
});

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <div class="as-text-box" contenteditable="true">
  </div>
</div>

Answer 5

简短＆amp;简单。当焦点边框变黑时，如果它失去焦点，则返回#ccc。

$('.as-text-box').on('focus', function() {
$('.div1').css("borderColor", "black");
$(this).on('focusout', function() {
    $('.div1').css("borderColor", "#ccc");
});

}）;

JSfiddle

如果一个div contenteditable是专注的？

5 个答案: