Question

当onmouseover / onmouseout事件发生时，我正在尝试显示有关图片的一些信息。我想要实现的目标就像this website一样畅销。

我的代码是这样的：

<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>

所以div信息块最初是隐藏的，但是当鼠标在图片上时，我想要这些信息出现在相应的图片上（图像上有浅色背景，以便看到文字）。但有些不起作用。我感谢任何建议如何处理这个问题。

编辑：我忘了提到css中不存在div id信息。我不确定我是否需要动态创建规则并将其附加到正文。另外，我选择使用内联的原因是因为我需要显示/隐藏用户将鼠标放在/取出的图像对应的文本（包含唯一的div id）。这意味着我有很多div容器，每个容器都有唯一的div id。

Answer 1

使用此内联onmouseover和onmouseout：

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

最好使用show(); / hide();代替css('display','block'); / css('display','block');

所以代码将是：

<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>

Answer 2

首先，我建议您创建函数，而不是仅仅在onMouseOver标记本身中执行操作。它使它非常难以理解，你可以通过使用双qoutes来简单地犯错误，你会得到语法错误。

第二，什么不起作用？它不会出现吗？顺便说一下，你也可以使用$（'＃info'）。show（）和.hide（）。做同样的事情。

Answer 3

改为使用：

 <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>

访问此处Demo

Answer 4

您应该将其放在脚本代码中，如下所示：http://www.w3schools.com/js/js_howto.asp 现在你把jQuery放在你的HTML中。

如果您将其放在页面底部并按照以下方式执行操作：

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

和

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

Answer 5

你可以试试这个：

<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()">

Answer 6

您必须在div上显示“onMouseOut”事件才能显示

这段代码工作

    <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>

Answer 7

我认为你的方式是错误的

尝试这个

    <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>

Answer 8

尝试此代码，它会替换onmouseover事件中的图像。但是在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>

HTML onmouseover无法显示文本

8 个答案: