悬停不处理div标签,而是改变内部文本元素的颜色

时间:2015-02-07 18:53:45

标签: javascript jquery html css

我已经按照此链接的响应网格教程获得了以下代码。



 .section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

.group a:hover{
    background: #3374C2;
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    display: block;
    width: 32%;
    margin: 0.1%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { margin: 1% 0 1% 0%;}
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

.innerDiv{ 
    width: 100%;
    border: 1px solid;
    border-radius: 15px;
    border-color: #F3F3F3;
}

.innerDiv :hover{ 
    border: 1px solid #1abc9c;
}

<div class="section group">
        <a href="javascript:void(null);">
            <div class="col span_1_of_3">
                <div class="innerDiv">
                    <h5>Illustrator</h5>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
                </div>
            </div>
        </a>
        <div class="col span_1_of_3">
            <div class="innerDiv">
                <h5>Illustrator</h5>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>
        <div class="col span_1_of_3">
            <div class="innerDiv">
                <h5>Illustrator</h5>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>
    </div>
&#13;
&#13;
&#13;

请注意,我添加了另一个名为 innerDiv div 。它的css被声明为On on hover event我想改变它的边框颜色。

但是它将边框颜色添加到

和标记 请帮忙!

提前致谢。

1 个答案:

答案 0 :(得分:0)

替换

.innerDiv :hover{ 
border: 1px solid #1abc9c;

}

.innerDiv:hover{ 
border: 1px solid #1abc9c;

}

我希望它能解决你的问题