我感到困惑和困惑。在下面的代码中，我有一个悬停图像，底部从红色变为蓝色。事情是。添加此代码后，它还会在页面顶部附近的img类中进行复制。我怎么能把这两个img分开？为什么较低的图像会影响较高的图像？任何答案都是最受欢迎的
<
!doctype html>
<html lang="en">
<head>
<title>Web Development Sevenoaks Kent - Web Design Sevenoaks Kent</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Web Development and Design in Sevenoaks Kent - DP Web Development based in Sevenoaks Kent ">
<meta name="keywords" content="Web Development, Bespoke Website Design, Sevenoaks, Kent, Website Maintenance, Website ">
<link rel="canonical" href="http://www.dpwebdevelopment.co.uk" />
<meta charset="utf-8">
<link rel="stylesheet" href="dpwebdevelopment4.css">
<link rel="icon" type="image/ico" href="http://www.dpwebdevelopment.co.uk/favicon.ico"/>
</head>
<body>
<?php require_once('nav.php'); ?>
<div id="bgleft"></div>
<div id="bgright"></div>
<img class="displayed" alt='DP Web Development Sevenoaks Kent Logo' src='webdevelopmentimages/DPLogo1.jpg' >
<div id="portrait">
<img src='webdevelopmentimages/Doug-Pitchers.jpg' alt='Doug Pitchers owner of DP Web Development'>
</div>
<main>
<div id="quote1">
<h1>Your website is not <i>just</i> a website...<br></h1></div>
<div id="quote2">
<h1>it's the best damn salesperson you'll ever have.</h1>
</div>
<div id="moveup">
<P class="blocktext">Whether you're a cocky upstart, a confident entrepreneur or a knarled old pro<b> one thing's for sure:</b>
</div>
<div id="quote3">
A professional outfit needs a professional web developer.
</div>
<p class="blocktext"><b>and you know you need a web developer that:</b></p>
<div id="list">
<ul>
<li>totally "gets” you</li>
<li>is jargon free! describes things in plain English</li>
<li>gets back to you promptly</li>
<li>hits deadlines. Every time.</li>
<li>makes the project fun!</li>
</ul>
</div>
<p class="blocktext"><b>You deserve a website thet will help you:</b></p>
<div id="list">
<ul>
<li>Look good</li>
<li>Showcase the results of your (extremely) hard work</li>
<li>Impress clients - even when you're asleep</li>
<li>Be seen as <b>the expert</b> in your field</li>
<li>Be seen as cutting edge in your niche</li>
</ul>
</div>
<p class="blocktext"><b>and you won't have to lift a finger to get it</b></p>
<div id="list">
<ul>
<li>You don't need to worry about the coding - <b>It's sorted</b></li>
<li>You don't need to worry about the domain - <b>It's sorted</b></li>
<li>You don't need to worry about the hosting - <b>It's sorted</b></li>
<li>You don't need to worry about the launch - <b>It's sorted</b></li>
<li>You don't need to worry about the process - <b>It's sorted</b></li>
</ul>
</div>
<br>
<div id="quote3">
This means you can RELAX: a new, gleaming and slick website is on it's way!
</div>
<div id="offer">
<p><b>But that's not all,</b> FOR FREE you get:</p>
</div>
<div id="list">
<ul>
<li><b>Google Analytics:</b> You will be able to see who, where, how much and how long poeple stay on your site. you'' be able to see what they are doing on your site and you can compare reasutls with other times of the year. And loads more besides. Pretty much everyting you would want to know about visits to your website.</li>
<li><b>Five new email addresses:</b> Because you@hotmail doesn't cut it anymore. And you get </b>five</b>. For different people in the business. Different areas of the business. Or just to look damn good.</li>
<li><b>All hosting costs, domain name purchases:</b>There are never any nasty surprises. Ever. The price quoted is the price you pay. It will never rise. Oh and I don't quote prices "+ VAT". Why do people do that? All prices are final.</li>
<li><b>I will promote your website</b> on Facebook, Twitter and my own website for one month. Totally free publity! Need I say more?</li>
</ul>
</div>
<script src="_js/jquery-1.10.2.min.js"></script>
<div id="button1">
<script>
var a = [];
a[0] = "webdevelopmentimages/BUTTON2.gif";
a[1] = "webdevelopmentimages/BUTTON6.gif";
$(document).ready(function() {
var source = $.preload(a);
$('img').attr('src',source[0].src); //just an acknowledgement (pre-loading done)
$('img').hover(function() {
$('img').attr('src',source[1].src);
},function() {
$('img').attr('src',source[0].src);
});
});
//Image Preloading....
var cache = [];
$.preload = function(arr) {
for(var i = 0; i<arr.length; i++) {
var img = new Image();
img.src = arr[i];
cache.push(img);
}
return cache;
};
</script>
<img />
</div>
<div id="emailbackground">
<div id="email">
<p>Enter your email below and feel empowered:<br>
Get help to make sense of the (digital) world
and look way more knowledgeable<br>
you'll never have to bluff your way again.</br>
<div id="emailbig">
+ get great entrepreneurial advice for <b>free!</b></p>
<div class="login">
<form method="post" action="http://ymlp.com/subscribe.php?id=gbjmeqmgmgj" target="signup_popup" onsubmit="window.open( 'http://ymlp.com/subscribe.php?id=gbjmeqmgmgj','signup_popup','scrollbars=yes,width=600,height=450'); return true;">
E-mail address:
<input name="YMP0" size="20" type="text">
Name:
<input name="YMP8" size="20" type="text">
<div class="login">
<input value="Submit" type="submit">
</div>
</form>
</div>
</div>
<br>
</main>
</body>`
</html>
答案 0 :(得分：1)
从根本上说，您需要对选择器进行限制。代码
$("img")
...在DOM中找到所有 img个元素。这段代码：
$('img').attr('src',source[1].src);
...在DOM中的所有 src元素上设置img。你需要缩小范围。
我不清楚您想要使用哪种特定图像，但如果它还没有只有id或class值，那么您需要添加一个。然后使用
$("#the-id")
或
$("img.the-class")
...引用它并设置其src。
答案 1 :(得分：0)
这是因为您每次都会调用所有图像。变化
$('img').hover(function() {
$('img').attr('src',source[1].src); // affects all images
},function() {
$('img').attr('src',source[0].src);
});
到此（原谅双关语） -
$('img').hover(function() {
$(this).attr('src',source[1].src); // affects only this image
},function() {
$(this).attr('src',source[0].src);
});
答案 2 :(得分：0)
对第二个图像使用cssclass，并使用jQuery中的类来更改源代码.....如果在jQuery中使用'img'，它将影响所有img标记。这样做：
将class =“secondimageclass”添加到第二个图像HTML并更改脚本以使用该类
$(document).ready(function() {
var source = $.preload(a);
$('.secondimageclass').attr('src',source[0].src); //just an acknowledgement (pre-loading done)
$('.secondimageclass').hover(function() {
$('.secondimageclass').attr('src',source[1].src);
},function() {
$('.secondimageclass').attr('src',source[0].src);
});
});