CODEWITHSUNDEEP
javascriptjqueryhtml
ChrisQ
ChrisQ

Reputation: 7

Hover and show code

We are ASM programmers, no html/css/js web experience. I want to have a series of lines, perhaps 30, and when one hovers on a line hidden text comes forth and hides when the hover moves away. We picked up code from a jQuery answer on the site, but cannot get it to work. Thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <script src="jquery-1.11.1.js"></script>
    <meta charset="utf-8"><title>puff1</title>

    </head>
    <body>
        <a href="#Dud" class="mark">Hover here</a>
        <div class="icontent">
            <p> Some nice Queen's english here ..." </p>
        </div>

$(".mark").on({
    mouseover: function() {
    $(".icontent").stop().show(1000);
    },
    mouseout: function() {
        $(".icontent").stop().hide(1000);
        }
    })
</body>
</html>

Upvotes: 1

Views: 68

Answers (2)

The Alpha
The Alpha

Reputation: 146269

Probably you want something like this:

<script>
    $(function(){
        $(".mark").on({
            mouseenter: function() {
                $(this).next(".icontent").stop().show(1000)
            },
            mouseleave: function() {
                $(this).next(".icontent").stop().hide(1000);
            }
        });
    });
</script>

Because you said:

I want to have a series of lines, perhaps 30, and when one hovers on a line hidden text comes forth and hides when the hover moves away.

So, showing or hiding using $(".icontent") will cause all elements with the class icontent to show/hide at the same time.

Upvotes: 0

tymeJV
tymeJV

Reputation: 104795

Wrap your code in <script> tags:

<script>
    $(".mark").on({
        mouseover: function() {
            $(".icontent").stop().show(1000);
        },
        mouseout: function() {
            $(".icontent").stop().hide(1000);
        }
   })
</script>

Upvotes: 2

Related Questions