0

我有一个这样的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;
}

如果我将输入悬停或聚焦于具有类 input-icon 的 div 获得新颜色和边框颜色，则第一个代码效果很好。我的问题是我也可以在第二个 div (.triangle-left) 中进行更改吗？我试过了，但我不工作。只有第一个 div 有效。如果我更改 div ，那么第一个三角形左比 css 代码有效。

你知道一种方法来做到这一点，或者是使用小型 jquery 脚本的唯一可能性吗？

谢谢你的帮助：）

问候 Crazymodder

4

1 回答 1

0

作为快速编辑： 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

因为按照您的方式，该样式适用于在聚焦/悬停时具有 text 类型的输入，该输入也具有 style triangle-left。由于唯一具有 class 的元素triange-left是 a div，因此没有任何元素受到影响。您想要的是将样式直接应用于实际triangle-left设置的元素。如果您不想仅使用类名，则可以使用div.triangle-left:focus或类似的名称。

于 2012-08-06T17:36:19.477 回答