1

我之前在这里找到了这个解决方案。

.hiding {
    display: none;
}

.trigger:hover + .hiding {
    display:table-row;
}

它隐藏一个表格行,然后在将鼠标悬停在另一个表格行上时显示它(类触发器)。

问题:我也想让课程hiding显示它何时悬停在自身上。目前它可以追溯到display:none你不再悬停在 class上的时候trigger

4

3 回答 3

2

您正在使用+哪个是相邻元素选择器,我建议您将元素包装.hiding在另一个元素中,比如类.test,而不是像这样更改您的选择器

.test .hiding {
    display: none;
}

.test:hover .hiding {
   display: table-row;
}

.trigger:hover + .test .hiding {
    display:table-row;
}

所以我们在这里所做的是我们隐藏嵌套在.test其中的元素,在这种情况下是.hiding,然后我们使用第二个选择器:hover来显示.hiding当元素.test悬停时(因为它存在,但原样.hiding为空display: none;)和最后但至少我们在第三个声明.test之后添加+,只是为了确保它不会违反规则,因为.hiding不再相邻.trigger,我们将.test其作为相邻元素.trigger

于 2013-05-29T12:37:26.153 回答
0

你不能只用 css 做到这一点。你需要 jquery 或 javascript

尝试这个

$(document).ready(function(){
   $(".trigger").hover(function () {
       $(this).css({"display" : "table-row"});
       //or u can add class like this
       //$(this).addClass("");
   },function () {
       //if you want return back, you can do here
   });
});

如果不返回悬停功能,它将保持悬停状态。

于 2013-05-29T12:42:59.273 回答
0

我能想到的唯一选择是将每组.trigger.hiding元素包装在 a中,并将显示/tbody隐藏行为基于 the :hovertbody

HTML:

<table>
    <tbody>
        <tr class="trigger">
            <td>text</td>
        </tr>
        <tr class="hiding">
            <td>hidden text</td>
        </tr>
    </tbody>
    <!-- and so on... -->
</table>

CSS:

tbody .hiding {
    display: none;
}

tbody:hover .hiding {
    display: table-row;
}

JS 小提琴演示

于 2013-05-29T12:33:54.093 回答