使用 jquery 和 css 的图像上的文本-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249228620

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2021-06-16 09:44 阅读(1213) 评论(0) 点赞(0) 收藏(4)

我使用教程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 (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>

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

所属网站分类: 技术文章 > 问答

作者：黑洞官方问答小能手