悬停在 div 标签上不起作用，而是更改内部文本元素的颜色答案

【问题标题】：Hover not working on div tag, instead changing color of inner text element悬停在 div 标签上不起作用，而是更改内部文本元素的颜色
【发布时间】：2015-02-08 03:09:53
【问题描述】：

我已经按照这个链接的响应式网格教程得到了以下代码。

 .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>

请注意，我添加了一个名为 innerDiv 的附加 div。它的 css 被声明为 On hover event I want to change theborder color.

而是将边框颜色添加到

和标签

请帮忙！

提前致谢。

【问题讨论】：

删除内部空间，这样你就有了 .innerDiv:hover。使用空格，:hover 不适用于 innerDiv，而仅适用于其内容。
非常感谢@bobdye。成功了！

标签： javascript jquery html css

【解决方案1】：

替换

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

}

与

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

}

希望能解决你的问题

【讨论】：