Question

我有一个像这样的html结构：

<form class="form">
                <div class="row">
                    <input id="search" class="search-input" type="text" placeholder="Search">
                    <div class="input-icon" data-icon="s"></div>
                    <div class="triangle-left"></div>                    
                 </div>
            </form>

以下css代码知道很重要：

input[type="text"]:focus, input[type="text"]:hover, input[type="password"]:focus, input[type="password"]:hover {
    border:1px solid #ffa800;
    box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset;
    -moz-box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset;
    -webkit-box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset;
}
input[type="text"]:focus + .input-icon:before, input[type="text"]:hover + .input-icon:before, input[type="password"]:focus + .input-icon:before, input[type="password"]:hover + .input-icon:before{
    color:#ffa800;
    border-color: #ffa800;
}
input[type="text"]:focus  .triangle-left, input[type="text"]:hover .triangle-left, input[type="password"]:focus .triangle-left, input[type="password"]:hover .triangle-left{
    border-color:transparent transparent transparent #ffa800;
}

第一个代码非常有用，如果我将输入div和带有类输入图标的div聚焦得到一个新颜色和边框颜色。我的问题是我是否可以在第二个div（.triangle-left）中进行更改？我试过了，但我不行。只有第一个div受影响。如果我更改div所以第一个三角形 - 左边比css代码工作。

您知道这样做的方法，还是唯一可能使用小型jquery脚本？

感谢您的帮助：）

此致 Crazymodder

Answer 1

快速编辑： http://jsfiddle.net/xngbv/ 问题是你实际上没有任何设置.triangle-left来使用你想要悬停和聚焦的样式。 .triangle-left是div，而不是任何类型的输入，因此您在上一个块中设置的样式（使用.triangle-left）没有效果

编辑：我所做的影响渲染的更改正在使用

.triangle-left:focus, .triangle-left:hover

而不是

input[type="text"]:focus .triangle-left, input[type="text"]:hover .triangle-left

因为你拥有它的方式，这种风格适用于聚焦/悬停时带有文本类型的输入，它也有样式triangle-left。由于类triange-left的唯一元素是div，因此没有元素受到影响。你想要的是直接将样式应用于实际设置triangle-left的元素。如果您不想只使用类名，可以使用div.triangle-left:focus或类似名称。

使用css设置2个div对焦或输入的悬停

1 个答案: