CODEWITHSUNDEEP
jqueryhtmlmouseover
REALFREE
REALFREE

Reputation: 4396

HTML onmouseover doesn't work to show up text

I'm trying to show some information on a picture when onmouseover/onmouseout event occurs. What I want to achieve is something like this website does on top selling.

My code is like this:

<div class="container" onmouseover="$('#info').css('display','block');" onmouseout="$('#info').css('display','none');">
<img src=...">
    <div id="info" style="display:none">
       ... some text ...
</div>
</div>

So div info block is initially hidden, but when mouse is on a picture I want the information to appear on corresponding picture (with tint background on the image to see text well). But somewhat it doesn't work. I appreciate any suggestion how to approach this problem.

Edit: I forgot to mention that div id info is not exist in css. I'm not sure that I need to dynamically create rule and attach it to body. In addition, the reason why I choose to use inline because I need to show/hide text corresponding to the image(contain unique div id)that user put their mouse on/out. That means I have many div container and each container has unique div id.

Upvotes: 2

Views: 6287

Answers (8)

Wallstrider
Wallstrider

Reputation: 856

Try this code, it replace image in onmouseover event. But won't work in internet explorer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>onmouseover, onmouseout test</title>
</head>
<body>
<img src="image1.png" alt="" onmouseout="this.src='image1.png'" onmouseover="this.src='image2.png'">&nbsp;
</body>
</html>

Upvotes: 0

srini
srini

Reputation: 884

i think your way is wrong

try this one 

    <html xmlns="http://www.w3.org/1999/xhtml">

            <head>
                <title>Horton Computer Solutions Home</title>

            </head>
            <style type="text/css">
            .container{
            width:100px;
            }

            </style>
            <script type="text/javascript">
            function over(){

            document.getElementById("info").style.display="block"
            }
            function out(){
            document.getElementById("info").style.display="none"
            }
            </script>
        <body>

            <div class="container">
    <img src="" alt="asdasd" onmouseover="over()" onmouseout="out()">
    <div id="info" style="display:none">
       ... some text ...
        ... some text ...
         ... some text ...
          ... some text ...
           ... some text ...
            ... some text ...
    </div>
    </div>



            </body>
            </html>

Upvotes: 0

kpotehin
kpotehin

Reputation: 1035

Use this instead inline onmouseover and onmouseout:

$('.container').mouseover(function() {
    $('#info').show();
}).mouseout(function() {
    $('#info').hide();
});

And it's also better to use show(); / hide(); instead css('display','block'); / css('display','block');

So the code will be:

<div class="container">
   ...
   <div style="display:none" id="info">
      ...
   </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('.container').mouseover(function() {
            $('#info').show();
        }).mouseout(function() {
            $('#info').hide();
        });
    });
</script>

Upvotes: 1

Mr_DeLeTeD
Mr_DeLeTeD

Reputation: 846

You have to make your "onMouseOut" event on the div to display

this piece of code work 

    <img src="" style="width:50px;height:50px;" onmouseover="testOn();" >
<div onmouseout="testOut();" id="info" style="width:50px;height:50px;display:none;color:white;background-color:black;opacity:0.7; position:relative;top:-50px;">
    bla bla
</div>
<script type="text/javascript">
    function testOn()
    {
        $('#info').css('display','block');
    }

    function testOut()
    {
        $('#info').css('display','none');
    }
</script>

Upvotes: 0

Kevin
Kevin

Reputation: 1019

you can try this :

<script type="text/javascript">
function showdiv() {
$(document).ready(function() {
$('#info').css('display','block');
});
}

function hidediv() {
$(document).ready(function() {
$('#info').css('display','none');
});
}
</script>

<div class="container" onmouseover="showdiv()" onmouseout="hidediv()">

Upvotes: 0

mparryy
mparryy

Reputation: 384

You should put that in a script tag, as shown here: http://www.w3schools.com/js/js_howto.asp Now you put jQuery in your html.

If you put it on the bottom of your page and do it like so:

$('#container').mouseenter (function() {
     $('#info').css('display','block');
});

and

$('#container').mouseout (function() {
     $('#info').css('display','none');
});

Upvotes: 0

Ashwini Verma
Ashwini Verma

Reputation: 7525

use this instead:

 <div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

 <script>
  var i = 0;
  $("div.overout").mouseover(function() {
    i += 1;
    $(this).find("span").text( "mouse over x " + i );
  }).mouseout(function(){
    $(this).find("span").text("mouse out ");
  });
</script>

visit here for Demo

Upvotes: 0

Ali Alwash
Ali Alwash

Reputation: 533

First of all, I would suggest you to make functions instead of just doing stuff in onMouseOver tag itself. It makes it very unreadable and you can simple make mistakes by using double qoutes and you would get syntax errors.

Second, what doesn't work? Does it not appear? Btw, you can use $('#info').show() and .hide() as well. Does the same thing.

Upvotes: 0

Related Questions