1

当输入获得焦点时，有没有办法改变父级的颜色查看演示。当输入有焦点时，我希望 div 是红色而不是蓝色。

演示

4

6 回答 6

5

这是一种仅使用 CSS 的欺骗方式......

演示：http: //jsfiddle.net/gvee/6fRUd/

HTML

<div>
    <input type="text" />
</div>

CSS

div {
    overflow: hidden;
    background-color: blue;
}
div * {
    position: relative;
    z-index: 10;
}
div input[type=text]:focus {
    background-color: red;
    box-shadow: 0 0 10000px 10000px lime;
    z-index: 5;
}
于 2013-08-20T13:50:47.230 回答
1

我认为你不能在纯 CSS 中做到这一点，但你可以使用 Javascript：

http://jsbin.com/uvon/1/edit?html,js,输出

var input = document.getElementById('input');
var div = document.getElementById('div');

input.onfocus = function(){
  input.style.backgroundColor = "red";
  div.style.backgroundColor = "red";
}

input.onblur = function(){
  input.style.backgroundColor = "white";
  div.style.backgroundColor = "blue";
}
于 2013-08-20T13:41:11.287 回答
1

jQuery 方法将使用 .parent()

<script>$("p").parent(".selected").css("background", "yellow");</script>

http://api.jquery.com/parent/

于 2013-08-20T13:42:18.370 回答
1

仅CSS方法

小提琴

http://jsfiddle.net/GT5sT/

CSS

input {
    position: relative;
    z-index: 2;
}
input:focus,
input:focus + div { background-color: red }
div {
    position: relative;
    background-color: blue;
}
div.background-hack {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

HTML

<div>
    <input />
    <div class="background-hack"></div>
</div>
于 2013-08-20T13:53:22.477 回答
0

您将不得不使用 javascript。

这是一个使用 jquery 的简短脚本。

$('#input').focus(function(){
  $('#box').css('background-color','red');
});

这是假设您的输入的 id 为input并且蓝色框的 id 为box。

于 2013-08-20T13:40:25.393 回答
0

javascript在这里也可以看下面的代码，它比只使用css更灵活

<!DOCTYPE html>
<html>
<head>
  <script>
    function myFunction(){
      document.getElementById('box').style.background="red";

    }
  </script>  
<title>JS Bin</title>
</head>
<body>
  <div id="box" style="background-color:blue">
    <input onfocus="myFunction()" />
  </div>
</body>
</html>
于 2013-08-20T14:10:51.677 回答