jquery fade hover 4 问题-6ren

jquery fade hover 4 问题

转载作者：行者123 更新时间：2023-11-28 14:18:16

我有四个关于 jquery 在图像悬停时淡化为黑色的问题:

——第一个是个小问题——周围有黑色边框我无法摆脱的图像。
——第二个是偶尔悬停其中一个图像尺寸减小(见附件截图)
— 第三个是我似乎无法提高悬停的速度
— 第四个是我希望在悬停时显示居中的文本

我真的是 Jquery 的新手，所以对于这些问题中的任何一个的任何帮助将不胜感激。提前致谢。

这是 CSS:

@charset "UTF-8";
/* CSS Document */

body {
    font-family: 'Questrial', sans-serif;
    background:#f5f5f5;
    border-bottom-left:25px;
    border-left-color:#F0EFF1;
    border-left-height:1000px;
    }

#border {
    position:fixed;
    width:37px;
    height:8000px;
    margin-left:-10px;
    margin-top:0px;
    z-index:2000;
    background-color:#f5f5f5;
    }

#infoleft
    {   
    position:fixed;
    top:20px;
    left:25px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.14em;
    line-height:1.2em;
    display:block;
    }

#infoleft ul {
    height:20px;
    font-weight:normal;
    font-size: 14.5px;
    letter-spacing: 1px;
    text-decoration:none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

#infoleft ul li { 
    display: inline; 
    padding: 10px;
    }


#inforight
    {   
    position:fixed;
    top:21px;
    right:23px;
    font-weight:normal;
    font-size: 14.5px;
    letter-spacing: 1pxem;
    }


#inforight ul {
    height:20px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.13em;
    text-decoration:none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }


#images {
    position:absolute;
    left:30px;
    bottom:35px;
    top:100px;
    width:25000px;
    padding-top:80px;
    min-height:500px;



}

img {
    padding:5px;
    height:90%;
}

#images a {
  display: inline-block;
  background: black;
  margin-right: 3px;
  /*adjust to your linking*/
}

#images img {
  pading: 5,5,5,5,;
}

img a:hover {
    color:black;
    opacity:1;
}

a {
    text-decoration:none;
    color:#000;
}

a:hover {
    color:#0080ff;
}

#showinfo {
    position:fixed;
    top:150px;
    left:35px;
    width:20px;
    height:20px;
    font-size:15px;
    z-index:2000;
}

#showinfo a {
    color:#000;
}

#showinfo a:hover {
    color:#0080ff;
    cursor:pointer;
}


#projectInfo {
    position: fixed;
    background: #f5f5f5;
    top: 185px;
    left: 5px;
    width: 280px;
    z-index: 1000;
    padding: 20px 32px 32px 30px;
    height: 280px;
    font-size: 13.5px;
    line-height:1.4em;
    letter-spacing:0.13em;
}

和 Html:

<!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>
<script type='text/javascript' src='jquery.js'></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script defer src="js/script.js"></script>
</head>
<body>
<div id="showinfo">
<a href="#" id="showProjectInfo"><span id="showhide">[+]</span></a>
</div>
<div id="projectInfo" style="display: block; ">
            <p>News from Nowhere</p>                            
            <p>—</p>
            <p>A response to The Tyranny of Email by John Freeman exploring how the quality of the written word has deteriorated due to the faster methods of digital communication by contrasting it with that of a pre-digital era. The leather bound-book consists of over 3000 different spam emails.

</p>
</div>
<div id="border">
</div>
<div id="infoleft">
<ul>
<li><a href="index.html">Dean Pauley</a></li>
<li>Graphic Design</li>
<li>mail@deanpauley.co.uk</li>
<li>+44(0)7969 652 219</li>
</ul>
</div>
<div id="inforight">
<ul>
<li><a href="info.html" class="transition">Information</a></li>
</ul>
</div>
<div id="images">
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.2"}, '300');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, '300');
    });
  });
</script>

  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


<script type="text/javascript">
$(document).ready(function(){
        $("projectinfo").hide();
        $("showprojectinfo").show();
    $('.show_hide').click(function(){
    $("projectinfo").slideToggle();
    });
});
</script>
<script src="js/script.min.js"></script>
</body>


</html>

截图:

Image with unwanted border

Hover with text

最佳答案

我发现在我的编程中图像变小的问题发生了，即使我已经专门将每个图像完美地调整到精确的尺寸并减小了文件大小......然后我发现它发生在幻灯片中，如果实际文件名的图像在格式名称(以 jpeg、gif、png 等结尾)之前有一个空格或破折号或其他一些奇怪的字符，足以产生一个错误，看起来图像越来越大关闭，就像相机快门一样。如果您返回并简单地重命名图像或删除空格、破折号等，然后重新加载它们，那么它会照常进行，幻灯片会按您的预期进行转换。

关于jquery fade hover 4 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8834849/

文章推荐： html - Div 中的居中按钮，位于其他居中文本下方

文章推荐： javascript 预期表达式，得到关键字 'break'

问题
关闭。这个问题是off-topic .它目前不接受答案。想要改进这个问题？ Update the question所以它是on-topic用于堆栈溢出。关闭 12 年前。 Improve thi
问题
我有一个动态网格，其中的数据功能需要正常工作，这样我才能逐步复制网格中的数据。假设在第 5 行中，我输入 10，则从第 6 行开始的后续行应从 11 开始读取，依此类推。如果我转到空白的第一行并输入
问题
我有一个关于我的按钮消失的问题我已经把一个图像作为我的按钮用这个函数动画 function example_animate(px) { $('#cont
php - 将现有帐户链接到 Facebook - 问题/问题
我有一个具有 Facebook 连接和经典用户名/密码登录的网站。目前，如果用户单击 facebook_connect 按钮，系统即可运行。但是，我想将现有帐户链接到 facebook，因为用户可以选
iOS map View 问题/问题
我有一个正在为 iOS 开发的应用程序，该应用程序执行以下操作加载和设置注释并启动核心定位和缩放到位置。 map 上有很多注释，从数据加载不会花很长时间，但将它们实际渲染到 map 上需要一段时间。
ruby-on-rails - Heroku，问题/问题
我被推荐使用 Heroku for Ruby on Rails 托管，到目前为止，我认为我真的会喜欢它。只是想知道是否有人可以帮助我找出问题所在。我按照那里的说明在该网站上创建应用程序，创建并提交
Android WebView setCertificate 问题 SSL 问题
我看过很多关于 SSL 错误的帖子和信息，我自己也偶然发现了一个。我正在尝试使用 GlobalSign CA BE 证书通过 Android WebView 访问网页，但出现了不可信错误。对于大多
c++ - Glew 问题， Unresolved external 问题
我想开始使用 OpenGL 3+ 和 4，但我在使用 Glew 时遇到了问题。我试图将 glew32.lib 包含在附加依赖项中，并且我已将库和 .dll 移动到主文件夹中，因此不应该有任何路径问题。
问题？
我已经盯着这两个下载页面的源代码看了一段时间，但我似乎找不到问题。我有两个下载页面，一个 javascript 可以工作，一个没有。工作:http://justupload.it/v/lfd7不是
jquery - 初级 jQuery 问题(FF/IE 问题)
我一直在使用 jQuery，只是尝试在单击链接时替换文本字段以及隐藏/显示内容项。它似乎在 IE 中工作得很好，但我似乎无法让它在 FF 中工作。我的 jQuery: $(function() {
Android ndk 问题 socket 和 std 问题
我正在尝试为 NDK 编译套接字库，但出现以下两个错误: error: 'close' was not declared in this scope 和 error: 'min' is not a m
java - Selenium 问题 : Select. deselectAll() 导致 iframe 问题
我正在使用 Selenium 浏览器自动化框架测试网站。在测试过程中，我切换到特定的框架，我们将其称为“frame_1”。后来，我在 Select 类中使用了 deselectAll() 方法。不久之
连接到 Heroku PostgreSQL 的 Python 问题 - SSL 问题
我正在尝试通过 Python 创建到 Heroku PostgreSQL 数据库的连接。我将 Windows10 与 Python 3.6.8 和 PostgreSQL 9.6 一起使用。我从“ht
python - 在 Pandas 中创建新列的 np.where() 问题(可能是 NaN 问题？)
我有一个包含 2 列的数据框，我想根据两列之间的比较创建第三列。所以逻辑是:第 1 列 val = 3，第 2 列 val = 4，因此新列值什么都没有第 1 列 val = 3，第 2 列 va
css - 如何调试 iphone 5 中的 css 问题(ui 问题)？
我想知道如何调试 iphone 5 中的 css 问题。我尝试使用 firelite 插件。但是从纵向旋转到横向时，火石占据了整个屏幕。有没有其他方法可以调试 iphone 5 中的 css 问题
CSS 问题，input[id]+label，:hover, 和 :checked 问题
所以我有点难以理解为什么这不起作用。我正在尝试替换我正在处理的示例站点上的类别复选框。我试图让它做以下事情:未选中时以一种方式出现，悬停时以另一种方式出现(选中或未选中)选中时以第三种方式出现(而不是
javascript - 1 javascript/css 问题 2 perl cgi 问题
Javascript CSS 问题: 我正在使用一个文本框来写入一个 div。我使用以下 javascript 获取文本框来执行此操作: function process_input(){
algorithm - NP 中的语言(问题)和 P 中的语言(问题)之间的多项式时间减少
你好，我很难理解 P、NP 和多项式时间缩减的主题。我试过在网上搜索它并问过我的一些 friend ，但我没有得到任何好的答案。我想问一个关于这个话题的一般性问题: 设 A,B 为 P 中的语言(或
python-3.x - 该算法(解决 leetcode 问题 650)(问题 2)的时间复杂度是多少？
你好，我一直在研究 https://leetcode.com/problems/2-keys-keyboard/并想到了这个动态规划问题。您从空白页上的“A”开始，完成后得到一个数字 n，页面上应该
ios - Xcode Server Bot 问题 : warning. 生成服务错误。问题:路径 'some/path' 的存档格式不正确
我正在使用 Cocoapods 和 KIF 在 Xcode 服务器上运行持续集成。我已经成功地为一个项目设置了它来报告每次提交。我现在正在使用第二个项目并收到错误: Bot Issue: warnin

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery fade hover 4 问题