2

当 onmouseover/onmouseout 事件发生时，我试图在图片上显示一些信息。我想要实现的是像这个网站一样畅销的东西。

我的代码是这样的：

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

4

8 回答 8

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>
于 2012-04-13T09:28:17.320 回答
0

首先，我建议您制作函数，而不仅仅是在 onMouseOver 标签本身中做一些事情。它使它非常不可读，并且您可以通过使用双引号来简单地出错，并且会出现语法错误。

第二，什么不起作用？它不出现吗？顺便说一句，您也可以使用 $('#info').show() 和 .hide() 。做同样的事情。

于 2012-04-13T09:27:03.943 回答
0

改用这个：

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

访问这里进行演示

于 2012-04-13T09:28:08.883 回答
0

你应该把它放在一个脚本标签中，如下所示：http://www.w3schools.com/js/js_howto.asp 现在你把 jQuery 放在你的 html 中。

如果您将其放在页面底部并这样做：

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

和

$('#container').mouseout (function() {
     $('#info').css('display','none');
});
于 2012-04-13T09:28:30.350 回答
0

你可以试试这个：

<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()">
于 2012-04-13T09:29:24.160 回答
0

您必须在 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>
于 2012-04-13T09:31:02.160 回答
0

我认为你的方式是错误的

试试这个

    <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>
于 2012-04-13T09:44:03.980 回答
0

试试这个代码，它会在 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>
于 2012-04-13T09:45:13.997 回答