0

テストページはこちら

http://www.studioteknik.com/html/test-portfolio.html

エラーはありませんでしたが、ホバースライド効果はありません...

手がかりはありますか？

更新、モルフは問題を修正しました。それはトリックを行った絶対位置でした..しかし、今、テキストが表示されると、下のリンクはクリックできません

修正されたページはこちら: http://www.studioteknik.com/html/test-portfolio3.html

4

2 に答える 2

3

CSS を更新する必要があります。.image img絶対に配置されていることを確認してください。

.image img {
    position: absolute; // added
    height: 100%;
    width: 100%;
}

これにより、スライドが機能します。ただし、画像は周囲の外側に表示されdivます。これを修正するには、overflow: hiddenプロパティをに追加し.imageます。

.image {
    // ...
    overflow: hidden; // added
}

更新:上記のソリューションでは、テキストが背後にある場合(つまり、クリックできないリンクがある場合) 、画像ではなくそれを.image divスライドすることをお勧めします。上記の代わりに、次のようにします。

.box {
    // ...
    overflow: hidden; // added
}

そしてあなたのJavaScriptで：

$('div.box').hover(function() {
    $(this).find(".image").animate({top:'200px'},{queue:false,duration:500});
}, function() {
    $(this).find(".image").animate({top:'0px'},{queue:false,duration:500});
});

hoverでイベントを追跡していることに注意してください。div.boxを下にスライドしますdiv.image。

于 2009-06-21T12:34:47.453 に答える
0

それは動作します

position:relative;

また、JSを次のように変更する必要があります。

$('div.webpreview').hover(....);

ページに「image」クラスのdivがないため:)

クリック可能なリンクの場合:

スタイル：

.webpreview  img {
    height: 100%;
    position:relative;
    overflow:hidden;
    width: 100%;
    z-index:100;//note this
}

.box .linkDiv{
       top:-300px;
       position:absolute;
       overflow:hidden;
       z-index:200;
}

JS:

$(document).ready(function() {
$('div.box').hover(
        function(){
             $('div.webpreview',$(this)).find("img").animate(
                      {top:'200px'},{queue:false,duration:1000});
            $("div.linkDiv", $(this)).animate({top:'0px'},
                      {queue:false, duration:500});
        },

        function(){
            $('div.webpreview',$(this)).find("img").animate(
                         {top:'0px'},{queue:false,duration:1000});
            $("div.linkDiv",$(this)).animate({top:'-300px'},
                         {queue:false, duration:500});
        }
        );
});

HTML:

<div class="box">
 <div class="linkDiv">
    <strong>Client :</strong> Sous le charme des érables<strong><br>
      Manda : </strong>Conception et réalisation<br>
      <strong>Adresse : <a href="http://www.souslecharme.ca/" 
           target="_blank">www.souslecharme.ca</a></strong>
</div>
  <div class="webpreview"><img src="test-portfolio_files/souslecharme.jpg"></div>
</div>

また、リンクを含む div のz-indexを変更してこれを行うことができます。

       $('div.box').hover(
        function(){
            $('div.webpreview',$(this)).find("img").animate(
                        {top:'200px'},{queue:false,duration:1000});
            $("div.linkDiv", $(this)).css("z-index","200");
        },

        function(){
            $('div.webpreview',$(this)).find("img").animate(
                       {top:'0px'},{queue:false,duration:1000});
            $("div.linkDiv", $(this)).css("z-index","50");
        });
于 2009-06-21T12:57:15.707 に答える