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>

我希望隐藏“子页面文本”类，当使用的鼠标悬停在“子页面图像”类上时，我希望它显示。我使用 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 回答