使用jquery和css的图像文字 [英] Text over image using jquery and css
问题描述
我使用教程 http：// www.webdesignlondon-tristar.co.uk/website-design-london/insane-jquery-image-rollover 。
我想要一个褪色/变暗翻转过程中的图像以及教程中显示的文本。然而，由于某种原因，我似乎无法让它工作，即使在启动一个空白文档。
这不是我第一次使用jQuery，所以我困惑，为什么我可以'b'b
我已经把所有的代码放在一起了;
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>无标题文档< / title>
< style type =text / css>
.wrapper {padding：8px; background-color：#fff; border：1px＃0d5a2c solid;位置：相对;宽度：300;身高：300;保证金：0汽车; }
.wrapper：hover {cursor：pointer; }
.description {display：none; background-color：＃000;颜色：＃000;位置：绝对; left：8px; top：8px;文字修饰：无; font-size：1.5em; width：250px;身高：130px;填充：120px 0 0 0; }
.description img {vertical-align：middle; margin：0 2px 1px 0; }
< / style>
< script src =jquery-1.3.1.min.jstype =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.PNGalt =产品1/>
< a href =＃title =点击了解更多class =description>
想要了解更多？
< / a>
< / div>
< / body>
< / html>
实时链接可以在 http://www.compuhex.co.uk/Version2/hovertext/
抱歉如果代码是混乱的。
感谢所有帮助的人们
所以总结一下我希望看到的为什么代码不起作用，即使它是来自教程网站的副本。显示的技术是我想要对我的网站做的事。谢谢
使用旧版本的jQuery（1.3.1），它会像预期的那样工作版本> 1.4;
在你的例子中，你将准备好的代码包装在< script src = .. 元素，您需要将两者分开，即：
< script src = jquery-1.7.2.min.jstype =text / javascript>
$（document）.ready（function（）{
...
< / script>
到：
< script src =jquery-1.7.2.min。 jstype =text / javascript>< / script>
< script type ='text / javascript'>
$（document）.ready（function（）{
...
< / script>
Im using the tutorial http://www.webdesignlondon-tristar.co.uk/website-design-london/insane-jquery-image-rollover.
I am wanting a fading/darken of the image on rollover and for the text to appear as in the tutorial. However for some reason I cannot seem to get it to work even when starting a blank document.
This is not the first time I have used jquery so Im confused why I can't get it working.
I have used all the code together;
<!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>
the live link can be seen on http://www.compuhex.co.uk/Version2/hovertext/
sorry if the code is messy.
Thanks for all the help guys
so to sum up Im looking to see why the code isnt working even though it is a copy from the tutorial site. The technique shown is the EXACT thing I want to do to my website. Thanks
Your using an old version of jQuery (1.3.1) it will work (as it standS) as expected with a version > 1.4;
In you example your wrapping your ready code in the <script src=.. element, you need to separate the two, i.e from:
<script src="jquery-1.7.2.min.js" type="text/javascript">
$(document).ready(function(){
...
</script>
to:
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
...
</script>
这篇关于使用jquery和css的图像文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
