背景イメージ包含要素外のホバー効果

私のCSS表の各行に背景イメージのホバー効果を適用しようとしていますが、その要素を含む要素の左側に表示する必要があります。背景イメージ包含要素外のホバー効果

View image http://www.weiserwebworld.com/images/view.gif

任意のアイデア？

JS：

$(function() { 
    $(".table-row").hover(function() { 
     $(this).addClass("highlight"); 
    }, function() { 
     $(this).removeClass("highlight"); 
    }) 
})

CSS：

#container { 
    width: 660px; 
    margin: 20px auto; 
} 

div .table { 
    display: table; 
    border: 1px red solid; 
} 
div .table-row { 
    display: table-row; 
} 
div .table-cell { 
    display: table-cell; 
    width: 145px; 
    padding: 10px; 
    vertical-align: top; 

} 
.highlight { 
    cursor: pointer; 
    background-image: url('click-to-view.png'); 
    background-position: 0 center; 
    background-repeat: no-repeat; 

}

HTML：

<div id="container"> 
    <div class="table"> 
     <div class="table-row"> 
      <div class="table-cell">Ralph Kramden</div> 
      <div class="table-cell">Truck Driver</div> 
      <div class="table-cell">8/17/2010</div> 
      <div class="table-cell">N/A</div> 
     </div> 
     <div class="table-row"> 
      <div class="table-cell">Ralph Kramden</div> 
      <div class="table-cell">Truck Driver</div> 
      <div class="table-cell">8/17/2010</div> 
      <div class="table-cell">N/A</div> 
     </div> 
    </div> 
</div>

あなたは、その後、DIVであなたのイメージを配置する必要があり

出典

2011-08-17 YourBudWeiser

これを指摘しておかなければなりません：データテーブルの場合、 'display：table *'で 'div'sの数は増えず、'

'を使用する必要があります。意味的には、 '

'が正しい選択です。 – thirtydot

これは当てはまりますが、これは実際のコードを簡略化したものです。テーブルを使用することは実際のコードでは実用的ではありません。 – YourBudWeiser

@ YourBudWeiser： 'display：table- *'のようなものを使っているなら、IE6については気にしません。ですから、jQueryを使用して.highlightクラスを追加し、CSSで '：hover'を使い始めることをやめてください！ –

答えて

まず、これを捨てる：

$(function() { 
    $(".table-row").hover(function() { 
     $(this).addClass("highlight"); 
    }, function() { 
     $(this).removeClass("highlight"); 
    }) 
})

それは醜態です。

次に、CSSセレクタ.highlightを.table-row:hoverに変更します。あなたは明らかにIE6について気にしないので（:hoverはa要素でのみ動作します）、:hoverの使用には何も問題ありません。

今すぐ残りの問題が発生します。

私はこのために使用する技術は、beforeまたはafter擬似要素です。このようなもの：

.table-row { 
    position: relative; /* So that the position: absolute on the "click to view" makes it relative to the table row */ 
} 
.table-row:hover:after { 
    position: absolute; 
    left: -80px; /* Adjust as desired */ 
    content: url(click-to-view.png); /* This makes it an image */ 
}

これでやっていることはたくさんありますが、それは一般的な考えです。 jsfiddleのデモはありません。私はテーブル構造や画像を取得するのに気を使うことはできません。

出典

2011-08-17 15:07:58

私は擬似要素のルートに行きましたが、このシナリオでは 'display：table-row'では動作しません。それはウィンドウに相対的であり、 '.table-row'には相対しません。 – tw16

それはありますか？私はそれができると思っていただろう。それがブラウザのバグかもしれないかと思っています。今すぐ寝るが、私は時間がある時には調査する物のリストに載せる。 –

笑、あなたは面白い男だクリス！これは実際に動作します。この例の左の位置は、画像を画面から外しますが、左を正の数に変更するだけです。ありがとう！ – YourBudWeiser

DIVを行に対して相対的に配置します。背景はコンテナの境界線から外れることはできません。

出典

2011-08-17 14:45:06

純粋なCSSでこれを行うことができます。

これは、迅速かつ汚れている、あなたが望むどのようにそれを微調整する必要がありますが、一般的な考え方は次のとおりです。あなたはこのようなCSSスタイルを追加することができます）あなたの行にIDを与える場合（

：

.overlay { 
    display: none; 
    position: absolute; 
    left: -30px; //makes it appear left of box, even though it's technically "in" box. 
} 

#table-row1:hover .overlay { 
    display; block; //Causes div to appear. 
}

ここで、あなたが好きな画像を追加するだけで、その画像をロールオーバーすると表示されます。

class = overlay divはid = table-row1 divの内側に置かなければならないことに注意してください。そうでないと表示されません。

テーブルプロパティを持つdivの現在の方法が非常に高速になる可能性があるので、同じ：ホバーアプローチを使用してタグを使用してこれをやり直すことをおすすめします。

出典

2011-08-17 14:48:24 Terrik

背景イメージ包含要素外のホバー効果

答えて

関連する問題