3

チュートリアル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/で見ることができます

コードが乱雑な場合は申し訳ありません。

すべての助けてくれてありがとう

つまり、チュートリアルサイトからのコピーであるにもかかわらず、コードが機能しない理由を調べているImを要約します。示されているテクニックは、私が自分のWebサイトに対して実行したい正確なことです。ありがとう

4

2 に答える 2

0

古いバージョンのjQuery（1.3.1）を使用すると、バージョンが1.4を超えると期待どおりに機能します（現状のまま）。

http://jsfiddle.net/dwrUj/

readyコードを要素でラップする例で<script src=..は、2つを分離する必要があります。

<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>
于 2012-06-14T11:03:34.487 に答える
0

urコードを次のように置き換えます 

<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>

正常に動作しています。バージョンは問題ありません。

于 2012-06-14T12:25:34.430 に答える