Home / Javascript / Jquery

Scroll Text Div On Hover And Return To First Element

June 13, 2023 Post a Comment

How to replace 'home' button with another text when I hover by mouse on it instead of it repeating itself?

Home
Solution 1:
Check my variant http://jsfiddle.net/3YNHp/5/
It uses markup:
```
<ulclass="topnav"><li><ahref="#"data-hover-text="Mohe">Home</a></li></ul>
```
And changed javascript:
```
$('.topnav li').find('a[href]').parent().each(function() {
    var li   = $(this),
        a    = li.find('a'),
        span = $('<span>' + a.data('hover-text') + '<\/span>');

    li.hover(function() {
        a.stop().animate({marginTop: '-64'}, 250);
    },
    function() {
        a.stop().animate({marginTop: '0'}, 250);
    })
    .append(span);
});
```
Solution 2:
What you need to do is put the text you want to show on hover in the anchor to start with like so
Baca Juga
```
<ulclass="topnav"><lidata-orig="Home"><ahref="#">Go to</a></li></ul>
```
And then in a data attribute place the text you want to show originally.
Then modify the javascript slightly to pull out the new values.
```
jQuery(function($) {

    $('.topnav li').find('a[href]').parent().each(function(span, li){
        li = $(li); span = $('<span>'+ li.attr('data-orig') +'<\/span>');
        li.hover(function(){
        span.stop().animate({marginTop: '-60'}, 250);
        }, function(){
        span.stop().animate({marginTop: '0'}, 250);
        }).prepend(span);
    });

});
```

Post a Comment for "Scroll Text Div On Hover And Return To First Element"