Question

我有一个带有两个元素输入的HTML5页面，用于电子邮件和密码。我想做以下事情：

1.-当我关注输入电子邮件时，我想在标签元素 b 中添加CSS样式。
2.-当我关注输入密码时，我想在标签元素 b 中添加CSS样式。

可能吗？

由于

这是我的代码：

CSS：

input.dx-texteditor-input:focus + .tooltip
{
  opacity: 1;
}              
input.dx-texteditor-input: focus + .tooltip-top-right
{
  right: 0; 
  left: auto; 
  margin-bottom: 5px;
}

HTML：

<label class="input">
    <i class="icon-append fa fa-lock" style="z-index: 1"></i>
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox">
        <div class="dx-texteditor-container">
            <input class="dx-texteditor-input" name="email" type="email">
            <div class="dx-placeholder"></div>
            <div class="dx-texteditor-buttons-container">
                <span class="dx-clear-button-area" onclick="void(0)">
                    <span class="dx-icon dx-icon-clear"></span>
                </span>
            </div>
        </div>
    </div>
    <b class="tooltip tooltip-top-right" style="opacity:0">
        <i class="fa fa-user txt-color-teal"></i> Please enter email address/username
    </b>
</label> 



<label class="input">
    <i class="icon-append fa fa-lock" style="z-index: 1"></i>
    <div class="dx-texteditor dx-texteditor-empty dx-show-clear-button dx-widget dx-textbox">
        <div class="dx-texteditor-container">
            <input class="dx-texteditor-input" name="email" type="email">
            <div class="dx-placeholder"></div>
            <div class="dx-texteditor-buttons-container">
                <span class="dx-clear-button-area" onclick="void(0)">
                    <span class="dx-icon dx-icon-clear"></span>
                </span>
            </div>
        </div>
    </div>
    <b class="tooltip tooltip-top-right" style="opacity:0">
        <i class="fa fa-lock txt-color-teal"></i> Enter password
    </b>
</label>

Answer 1

也许你可以像这样使用Jquery选择器。

$(".form input").focus(function() {
  $(".form b").css("color","red");
});

https://jsfiddle.net/5zbsbrp7/

或仅使用css

input:focus + b {
    color: red
}

https://jsfiddle.net/041jsrew/

如何更改外部元素的CSS？

1 个答案: