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

Question

我想在悬停 div 时更改 <hr> 的样式。我不知道 'onmouseover' 是否是一种可行的方法，或者是否有一些 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> 元素。

Change <hr> element when a <div> mouseover action.

html

javascript

css

jquery

mousehover