Question

我希望在div悬停时更改<hr>的样式。我不知道＆＃39; onmouseover＆＃39;是一种可行的方法，或者是否有一些CSS允许更改一个元素而另一个父元素悬停在上面。

我目前的HTML是：

<div id="images-landscaping">
  <div class='text'>
    <h3>Landscaping</h3>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque nec nisl a commodo.</p>
  </div>
</div>

我的CSS是：

.services {
    margin: 0 0 250px 0;
    padding: 0;
    position: relative;
}

#images-landscaping, #images-res, #images-com {
     width: 33.3333%;
     height: 250px;
     background-position: center;
     float: left;
}

#images-landscaping {
    background: url('../img/land-opac.jpg') no-repeat center;
}   

.text hr {
    width: 75px;
    float: left;
    color: #FDCF08;
    background: #FDCF08;
    height: 3px;
    border: none;
}

当有人将鼠标悬停在div上时，增加<hr>元素大小的最佳方法是什么？

Answer 1

请参阅以下代码，它可能对您有帮助。

#images-landscaping, #images-res, #images-com {
     width: 33.3333%;
     height: 250px;
     background-position: center;
     float: left;
}

#images-landscaping {
    background: url('../img/land-opac.jpg') no-repeat center;
}   

.text hr {
    width: 75px;
    float: left;
    color: #FDCF08;
    background: #FDCF08;
    height: 3px;
    border: none; -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; 
}
div.text:hover hr{ width:250px; -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }

<div id="images-landscaping">
  <div class='text'>
    <h3>Landscaping</h3>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque nec nisl a commodo.</p>
  </div>
</div>

在<div>鼠标悬停操作时更改<hr />元素。

1 个答案: