使用 jquery 和 css 的图像上的文本答案

【问题标题】：Text over image using jquery and css使用 jquery 和 css 的图像上的文本
【发布时间】：2012-06-14 10:55:27
【问题描述】：

我正在使用教程http://www.webdesignlondon-tristar.co.uk/website-design-london/insane-jquery-image-rollover。

我希望图像在翻转时褪色/变暗，并且文本显示在教程中。但是由于某种原因，即使开始一个空白文档，我似乎也无法让它工作。

这不是我第一次使用 jquery，所以我很困惑为什么我不能让它工作。

我已经把所有的代码一起使用了；

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.wrapper            { padding: 8px; background-color: #fff; border: 1px #0d5a2c solid; position: relative; width:300; height: 300; margin: 0 auto; }
.wrapper:hover      { cursor: pointer; }
.description        { display: none; background-color: #000; color: #000; position: absolute; left: 8px; top: 8px; text-decoration: none; font-size: 1.5em; width: 250px; height: 130px; padding: 120px 0 0 0; }
.description img    { vertical-align: middle; margin: 0 2px 1px 0; }

</style>

<script src="jquery-1.3.1.min.js" type="text/javascript">
$(document).ready(function(){
    $('.wrapper').hover(function(){
        $(this).children('.description').stop().fadeTo(200, 0.8);
    },function(){
        $(this).children('.description').stop().fadeTo(200, 0);
    });
});
</script>

</head>



<body>
<div class="wrapper">
<img src="http://www.compuhex.co.uk/Version2/products2/blue.PNG" alt="Product 1" />
<a href="#" title="Click for More" class="description">
Want to read more?
</a>
</div>

</body>
</html>

直播链接可见http://www.compuhex.co.uk/Version2/hovertext/

如果代码混乱，请见谅。

感谢大家的帮助

所以总结一下，我想看看为什么代码不起作用，即使它是教程网站的副本。显示的技术正是我想要对我的网站做的事情。谢谢

【问题讨论】：

标签： jquery html css hover

【解决方案1】：

您使用的是旧版本的 jQuery (1.3.1)，它会在版本 > 1.4 时按预期工作（就目前而言）；

http://jsfiddle.net/dwrUj/

在您的示例中，您将 ready 代码包装在 <script src=.. 元素中，您需要将两者分开，即来自：

<script src="jquery-1.7.2.min.js" type="text/javascript">
    $(document).ready(function(){
    ...
</script>

到：

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function(){
    ...
</script>

【讨论】：

嘿 alex，我将它更新为 jquery-1.7.2.min.js 并上传到 compuhex.co.uk/Version2/hovertext，但它仍然没有出现。为什么它可以在小提琴中工作，但不能在浏览器中工作？我错过了任何关键的基本代码吗？谢谢亚历克斯
太棒了！谢谢亚历克斯。很简单，不知道为什么我会这样说。另一方面，如果我想为脚本添加不透明度，是否需要进行大量编辑？
只对原始图像而不是文本不透明
示例不就是这样吗？将示例中的 css 复制到小提琴中；它的尺寸和偏移量需要调整
哈哈是的。只是我又傻了。感谢所有帮助亚历克斯。杰出贡献者！

【解决方案2】：

将你的代码替换为

<script src="jquery-1.3.1.min.js" type="text/javascript"></script>


<script type="text/javascript">

$(document).ready(function(){  

 $('.wrapper').hover(function(){


 $(this).children('.description').stop().show().fadeTo(200, 0.8);
},function(){
    $(this).children('.description').stop().hide().fadeTo(200, 0);
});


  });
</script>

它工作正常..版本不是问题

【讨论】：