1

画像にカーソルを合わせると、画像の外側の背景部分の色が変わります。ウェブサイトの投稿の下部にある「関連する投稿」と同様の結果が欲しいのですが。すなわち http://www.livecrafteat.com/eat/chicken-and-stuffing-in-the-crockpot/

私はテキストウィジェットを使用しており、最終的には同じサイズの2つの画像の行が必要です。この画像にカーソルを合わせると、投稿の下部にあるYARRプラグインのように背景が変化します。このテーブル形式は6行あり、可能な限りクリーンに制御できるように設定しようとしました。私はそれを機能させるためにそれぞれ次のHTMLとCSSを設定しようとしましたが、特にホバー部分でスタックしています。

HTML：

<div class="popular-posts">
            <tbody>
                <tr>
<div class="pop-posts-left" width="160px" height="160px">
                    <td align="left" >
<div class="pop-posts-image-left"><a href="http://www.livecrafteat.com/live/meal-planning-template/"> <img src="http://www.livecrafteat.com/wp-content/uploads/2012/08/menu-plan-sidebar-thumbnail-2.jpg" />  </a></div>
</td>
</div>
<div class="pop-posts-right" width="160px" height="160px">
                    <td align="right">
<div class="pop-posts-image-right"><a href="http://www.livecrafteat.com/live/meal-planning-template/"> <img src="http://www.livecrafteat.com/wp-content/uploads/2012/08/menu-plan-sidebar-thumbnail-2.jpg" />  </a></div>
</td>
</div>
</tr>
</tbody>
</left>
</div>

CSS：

.pop-posts-left {
    background: red;
    float: left;
    padding: 10px 15px 10px 15px;
    overflow: hidden;
}
.pop-posts-right {
    float: right;
    padding: 10px 15px 10px 15px;
    background: orange;
}
.pop-posts-left a:hover {
}
.pop-posts-image-left a:hover {
    background: green;
}
4

5 に答える 5

0

.pop-posts-left:hover { background: green; }（例として）動作するはずです。ある要素にカーソルを合わせて別の要素に影響を与えたい場合は、おそらくそのためのjQueryが必要になります。

于 2012-08-05T02:49:46.227 に答える
0

コンテナで「：hover」疑似クラスを使用するだけです。これは、より一般的に見られる「a」タグセレクターだけでなく、任意のセレクターと組み合わせて使用​​できます。

例： http： //jsfiddle.net/davidbuzatto/pc78c/

これらのドキュメントもご覧ください：https ：//developer.mozilla.org/en-US/docs/CSS/：hover

于 2012-08-05T02:50:37.237 に答える
0

これはあなたが探しているものですかhttp://jsfiddle.net/MFx5E/1/？

.pop-posts-left:hover {
    background: green;
}
.pop-posts-image-left a:hover {
    background: green;
}
.pop-posts-right:hover {
    background: green;
}
.pop-posts-image-right a:hover {
    background: green;
}
于 2012-08-05T02:51:57.900 に答える
0

background-colorで定義されている緑が表示されない理由は、.pop-posts-image-left a:hover不透明なjpg画像が原因です。さらに、にパディングを追加しませんでした.pop-posts-image-left。

これを理解するには、以下を追加して、何が起こるかを確認します。

.pop-posts-image-left {
    padding: 10px;
}
于 2012-08-05T02:52:44.720 に答える
0

あなたのhtmlは実際には完全に無効です。

  • あなたは中に置く必要があります
  • あなたがしているように、いいえを含むべきです
  • あなたがそれを決して開かなかった間、下にあります

結果を台無しにする可能性があるため、最初にhtmlを修正してみてください。W3CWebサイトでコードを検証する ことも常に良い考えです。

その後、ホバー効果は簡単になるはずです。@ChrisClowerが提案するようなことをしてください。

于 2012-08-05T03:01:23.020 に答える