Make：焦点改变另一个类的css [英] Make :focus change css of another class

问题描述

假设我有以下代码：

HTML

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

CSS

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

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

Obviously this code doesnt work. I want some specific css to get executed when there is focus on my inputbox. Is this at all possible?

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

I'm not specificly looking for html/css only solutions. Any solution that can achieve this is welcome.

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

My code above is just an extremely simple example. My question is really simple. Is it possible to change styling on ANY element on your website using the :focus on an input box.

推荐答案

只有当其他元素是直接或间接的兄弟姐妹或其他元素时，才能使用伪类作为修改其他元素的操作。具有伪类的元素的子元素（例如：hover 或：focus ）。那是因为 CSS子/兄弟选择器是相当严格的。

Using pseudo-classes as an action to modify other elements can only be done if the other elements are direct or indirect siblings or children of the element which has the pseudo-class (such as :hover or :focus). That's because CSS child/sibling selectors are fairly restrictive.

您可以使用> 选择器来选择直接子项， + 选择器以选择直接兄弟。例如，如果您有以下HTML：

You can use the > selector to select a direct child, and the + selector to select a direct sibling. For example, if you have the following 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等。）。

You could style the button when the text field has focus (because it is a direct sibling of the text field), but there is no possible way to style the arbitrary paragraph as a result of the text field receiving focus (because it is neither a child nor sibling, it is the sibling of a parent) without using client-side scripting (JavaScript, jQuery, etc.).

这个CSS会设置提交按钮的样式，并且可以更改为选择任何直接或间接的孩子或兄弟姐妹：

This CSS would style the submit button, and can be altered to select any direct or indirect child or sibling:

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

使用Javascript，当然，你有更大的灵活性。 焦点 和 blur 事件（Firefox尚不支持 focusin 和 focusout ）可用于切换CSS类。这是一个演示实现此目的的CSS和JavaScript技术的示例。

Using Javascript, of course, you have much greater flexibility. The focus and blur events (Firefox doesn't yet support focusin and focusout) can be used to toggle CSS classes. Here's an example that demonstrates both the CSS and JavaScript techniques of achieving this.

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等价物，如果这是你的果酱。

Here's the jQuery equivalent of the above code, if that's your jam.

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

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

请注意，如果您决定要做类似的事情，除非使用悬停触发器而不是焦点，你可以使用JavaScript mouseover 和 mouseout 功能，或jQuery .hover（ ） 函数，它接受两个参数（一个用于输入悬停的处理程序和一个用于离开悬停的处理程序）。

Note that if you decide you want to do something similar, except using a "hover" trigger rather than "focus", you can use the JavaScript mouseover and mouseout functions, or the jQuery .hover() function which takes two arguments (a handler for entering the hover and another for leaving the hover).

这篇关于Make：焦点改变另一个类的css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！