0

これを機能させるのに苦労しています。

これが私のhtmlレイアウトです

<td class="subpages-cell">
<span class="subpages-posts-image">
    <a href="">
         <figure class="tint t7">
             <img src="" class="subpages-image">
         </figure>
    </a>
</span>
<p class="subpages-text">
    <a href="">Hello</a>
</p>
</td>

「subpages-text」クラスを非表示にして、使用済みが「subpages-image」クラスにカーソルを合わせたときに表示したい。css と .hove Jquery を使用して複数の方法を試しましたが、正しい方法をターゲットにすることができません。

今のところ、次を使用して修正しました：

p.subpages-text { display:none;}

.subpages-cell:hover p.subpages-text a {display:block;}

ただし、td にはパディングがあるため、ホバーした領域が画像上に広がります。

これは私の最初の投稿であり、できる限り多くの調査を試みました。ルールを破った場合はお知らせください。乾杯

4

3 に答える 3

1

最初に、それが含まれているpクラスとは異なるクラスを指定する必要がありますtd。そうしないと、css ルールによってコンテナーも非表示になります (コンテナー内のすべても非表示になります)。

次に、jQuery を使用して、ホバーしたものにp.subpages-text最も近いものを見つけることができます。img

これを行うには、次のように記述できます。

$('.subpages-image').hover(
    function(){
        $(this).closest("span").siblings(".subpages-text").show();
    },
    function(){
        $(this).closest("span").siblings(".subpages-text").hide();
    }
);

フィドル: http://jsfiddle.net/Aj87N/3/

于 2013-04-02T18:24:59.483 に答える
0

これがあなたが探しているものかどうか教えてください

$('.subpages-image').hover(
function(){
  $('.subpages-text a').show();
},
function(){
  $('.subpages-text a').hide();
}
);

JSフィドルはこちら：http://jsfiddle.net/Aj87N/

于 2013-04-02T18:17:11.567 に答える
0

対話したい要素は、対話に基づいて表示/非表示にしたい要素の兄弟の下にネストされているため、これは CSS では実行できません (もちろん、JavaScript はオプションですが)。ただし、相互作用をspan要素の兄弟であるp要素に移動すると、これが可能になります（ただし、それはあなたが望んでいたものではありませんが、私は知っています）：

<table>
    <tbody>
        <tr>
            <td class="subpages-text">
                <span class="subpages-posts-image">
                    <a href="">
                         <figure class="tint t7">
                             <img src="http://lorempixel.com/200/200/nightlife" class="subpages-image" />
                         </figure>
                    </a>
                </span>

                <p class="subpages-text"><a href="">Hello</a>

                </p>
            </td>
        </tr>
    </tbody>
</table>

次に、次の CSS が機能します。

.subpages-text p.subpages-text {
    display: none;
}

.subpages-text:hover span:hover + p.subpages-text {
    display: block;
}

JS フィドルのデモ。

于 2013-04-02T18:33:25.397 に答える