Using the jQuery .hover function

Question

I have some spans that I am trying to toggle the display of when the pointer hovers on them using jQuery and the CSS visibility property (display property is fine too, but neither has worked just far). The spans' code is as follows:

.buy1 {
  visibility: hidden;
}

<span class="buy1">
  <h3><a href="#">buy</a></h3>
</span>

Likely the reason is that my jQuery is wrong, as it's not my strong suit. Anyone have a suggestion of something that would work better?

<script type="text/javascript">
$( document ).ready(function() {
 
    $( "span.buy1" ).hover(function() {
 
        $("span.buy1").css("visibility","visible");
 
    });
 
});
</script>

you want to display on hover and hide on mouse out right? – Cerlin Feb 02 '15 at 04:33 — Cerlin, Feb 02 '15 at 04:33

score 2 · Answer 1 · answered Feb 02 '15 at 04:44

2

how about this

JQUERY

$(document).ready(function () {
    $("span.buy1 a").hover(function () {
        $(this).stop().animate({"opacity" : "1"});
    }, function () {
        $(this).stop().animate({"opacity" : "0"});
    });
});

CSS

.buy1 a{
    opacity:0;
}

answered Feb 02 '15 at 04:44

Cerlin

6,622
1
20
28

1

Should have been accepted as the only working solution there :-) – Artur Filipiak Feb 02 '15 at 18:25
This worked and looks amazing! Thank you! For the purposes of better UI, is there any way to amend this script such that the span displays when its parent element (a div, in this case) is hovered? – Daniel Markus Feb 05 '15 at 21:48

score 0 · Answer 2 · edited Feb 02 '15 at 05:11

0

$(document).ready(function() {
    $('span.buy1').hover(
        function () {
            $(this).show().stop().animate({
                left:'15px',
                opacity:'0.5'
            },500);  
        }, 
        function () {
            $(this).hide().stop().animate({"opacity": "1"},5000);    
        }
    );
});

Try This..

edited Feb 02 '15 at 05:11

Artur Filipiak

9,027
4
30
56

answered Feb 02 '15 at 04:32

Nirmal Kumar

125
8

score 0 · Answer 3 · answered Feb 02 '15 at 04:34

0

You can use do that on css

.buy1:hover {
    visibility: visible;
}

.buy1 {
    visibility: hidden;
}

answered Feb 02 '15 at 04:34

ryvasquez

158
8

score 0 · Answer 4 · edited May 23 '17 at 10:26

See Hover over a hidden element to show it for a similar question. Basically, you can accomplish this by setting opacity to 0, and jQuery's fadeTo method or really any other way of adjusting opacity.

$( document ).ready(function() {
 
    $( "span.buy1" ).hover(function() {
        $("span.buy1").fadeTo(1,1);
 
    }, function() {
        $("span.buy1").fadeTo(1,0);  
    });
 
});

.buy1 {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="buy1">
  <h3><a href="#">buy</a></h3>
</span>

Using the jQuery .hover function

4 Answers4