jack.allen.web jack.allen.web - 1 year ago 44
Javascript Question

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

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download