how to give animation effect on hover using css or jquery on border of division


Tags: javascript,jquery,css

Problem :

.heading-text{
    font-family: verdana;
    font-size:12px;
    color:#124253;
    min-width:50px;
    height:32px;
    margin-top:8px;
    text-align: center;
    cursor: pointer;
}
.heading-text:hover{
    border-bottom-style:solid;
    border-bottom-color:#012b61;
    border-bottom-width:3px;
}

In above division i want to give effect like the bottom border of the division is start from left and go to right at time of hover is it possible by CSS or JQUERY of javascript

Please give answer as fast as possible or if any other alternative way then also inform me



Solution :

You can use svg for this. SEE DEMO

HTML:

<div>
      <svg width="200" height="200">
          <line x1="0" y1="0" x2="600" y2="0" />
      </svg>
 </div>

CSS:

div {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ddd;
}

svg {
    position: absolute;
    top: 200px;
    left: 0;
}

svg line {
    stroke-width: 10;
    stroke: #000;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: -webkit-transform .6s;
    transition: transform .6s;
}

div:hover svg line {
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}

    CSS Howto..

    How to get a zoomed out background image?

    How to edit css selectors to test something in Firebug?

    How to create a div filling the vertical available space without overlapping the containing div?

    how to change a css class onclick?

    how to set background-image to pseudo element?

    How to keep an element fixed top within another element?

    How to position background image inside table cell with padding

    How to change hover background on links in css?

    How do I achieve a fully working image scrolling effect like in this example?

    How to display table-cell on a single line (IE6-IE7)?

    Hover img to show an absolutely positioned div isn't working

    How to make hovering over a class to trigger changes in other classes?

    fa-star () is always yellow, how to make it white?

    How to simplify CSS code

    CSS selector: how to make 2 spans each fill 50% of their parent's width?

    How can I make an H4 element behave like an HR when floats are present

    HTML, CSS - I want to create a button “Preview” which will show user his input

    Popup not showing once per session as wanted (as mentioned by client)

    How to do HTML/CSS form helpers/popover

    How is Facebook's website front-end and it's right sidebar designed?

    How to indicate that an LI with a link was pressed.

    How to make an equal distance between elements footer?

    How to achieve two multi-step forms, one form on each side using CSS transformation

    how to keep the css style after inserting a row to table by jquery

    How to prevent the jump during css transition?

    How do I change this flipping card to rotate itself onclick?

    show loading image before the content loads through jquery or ajax

    how to draw a vertical line between two option boxes using css

    How can I add categories-authors-members area for commenting on my website? [closed]

    How to make highlighted table with rowspan