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 can I use .htaccess to send distant expiry headers on CSS and JS files?

    CSS: How to set height of body element to fill rest of total height excluding variable length header and footer

    Given an url, how could a script find what resources are loaded?

    how to Load a css file for html page android web view

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    Why the space after the table, and how to remove it?

    How to change CSS of child element inside parent
    element Using jQuery onclick event?

    Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

    How to make the gradient border stay at the screen

    How to create a scrollable Div Tag Vertically?

    How can I center-align text with uneven icons either side?

    How to keep the navbar fixed to top in big screens only using jquery

    How to identify unused css definitions [closed]

    How to adjust CSS to make footer fixed height?

    How to change color of a single letter in a word using CSS/HTML or Javascript [closed]

    iphone - How to implement the effect of “float” for image, just like in CSS style

    Should be Simple: How to preserve data on a page of basic javascript/css/html when going to another page

    How to make menu bar with nested submenu css

    How to use an image as a frame, and scroll inside? Simulating a phone on a website

    How do I make this type of layout with CSS? [closed]

    I am not sure how to convert my webpages Table over to divs instead

    how to create a half bordered circle(only css, not js or even svg)?

    How to fill remaining height and width?

    In what circumstances is flex-shrink applied to flex elements and how does it work?

    CSS: How to break images into rows?

    Show jquery datepicker with HTML/CSS image

    css how to make two div side by side

    how to scale img by percentage of self and not percentage of its container

    How to Get Multiple elements to change color on hover CSS?

    Showing images next to paragraph