Make:焦点改变另一个类的css

Question

假设我有以下代码:

HTML

<div class="container">
   <input class="myAwesomeInputBox">
</div>

CSS

.input [type=text]:focus > .//ANY CLASS SOMEWHERE ON THE WEBSITE{
   //Some sweet CSS.
}

显然这段代码不起作用.我想要一些特定的CSS在我的输入框上有焦点时执行.这是可能吗？

我并没有特别寻找只有html/css的解决方案.任何能够实现这一目标的解决方案都是受

我上面的代码只是一个非常简单的例子.我的问题很简单.是否可以使用以下方法更改网站上任何元素的样式:聚焦于输入框.

Answer 1

只有当其他元素是具有伪类(例如:hover或:focus)的元素的直接或间接兄弟或子元素时,才能使用伪类作为修改其他元素的操作.这是因为CSS子/兄弟选择器是相当严格的.

您可以使用>选择器选择直接子项,使用选择器选择直接子项+.例如,如果您有以下HTML:

<form>
    <input type="text" />
    <input type="submit" />
</form>
<p class="arbitrary">
    This is an arbitrary element. It is neither a child nor sibling of 
    the text field. It cannot be selected as a result of a pseudo-class 
    action on the textfield using CSS, but can be selected using 
    client-side scripting such as JavaScript.
</p>

你可以在文本字段具有焦点时设置按钮的样式(因为它是文本字段的直接兄弟),但是由于文本字段获得焦点而没有可能的方式来设置任意段落的样式(因为它既不是没有使用客户端脚本(JavaScript,jQuery等)的孩子或兄弟,它是父母的兄弟姐妹.

这个CSS会设置提交按钮的样式,并可以更改为选择任何直接或间接的子或兄弟:

input[type="text"]:focus + input[type="submit"] {
    /* some sweet CSS */
    background-color:green;
}

当然,使用Javascript可以获得更大的灵活性.在focus和blur事件(火狐还不支持focusin和focusout)可用于切换CSS类.这是一个演示实现此目的的CSS和JavaScript技术的示例.

function setFocused() {
  var results = document.querySelectorAll('.arbitrary');
  for (result of results) {
    result.classList.add('focused');
  }
}

function unsetFocused() {
  var results = document.querySelectorAll('.arbitrary');
  for (result of results) {
    result.classList.remove('focused');
  }
}

var results = document.querySelectorAll('input[type="text"]');
for (result of results) {
  result.addEventListener("focus", setFocused);
  result.addEventListener("blur", unsetFocused);
}

input[type="text"]:focus + input[type="submit"] {
  /* some sweet CSS */
  background-color: green;
}

.arbitrary.focused {
  /* even more sweet CSS */
  color: red;
}

<form>
  <input type="text" />
  <input type="submit" />
</form>

<p class="arbitrary">
  This is an arbitrary element. It is neither a child nor sibling of
  the text field. It cannot be selected as a result of a pseudo-class
  action on the textfield using CSS, but can be selected using
  client-side scripting such as JavaScript.
</p>

这是jQuery相当于上面的代码,如果这是你的果酱.

$('input[type="text"]').on('focus', function() {
    $('.arbitrary').addClass('focused');
});

$('input[type="text"]').off('focus', function() {
    $('.arbitrary').removeClass('focused');
});

请注意,如果您决定要执行类似的操作,除了使用"悬停"触发器而不是"焦点",您可以使用JavaScript mouseover和mouseout函数,或者使用.hover()带有两个参数的jQuery 函数(用于输入悬停的处理程序和另一个离开悬停).