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

Question

I want to change the style of a <hr> when a div is hovered over. I don't know if the 'onmouseover' is a viable method or if there is some CSS to allow the changing of one element while another parent element is being hover over.

My current HTML is:

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

My CSS is:

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

What would be the best way to increase the size of the <hr> element when someone hovers their mouse over the div.

Answer 1

Please see the below code, it may help you.

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