[英]CSS hover effect not working on span in table
After it did work at first, I (apparently) changed something in my CSS. 在起初起作用后,我(显然)在CSS中进行了更改。 After hours of research I still can't figure out why the content of my
<span>
now won't be displayed on hover anymore... 经过数小时的研究,我仍然不知道为什么现在
<span>
的内容不再显示在悬停...
Can anyone help me, please? 有人可以帮我吗? Thank you!
谢谢!
This is a snippet of my CSS: 这是我的CSS的片段:
td.matchbool {
text-align: center;
box-shadow: inset 0px 0px 0px 10px #fff;
}
td.matchbool:hover{
background:#e2e236;
width:400px;
}
td.matchbool span{
display: none;
}
td.matchbool:hover span{
z-index: 9999;
width: 300px;
border-left: 5px solid #e2e236;
display: block;
padding: 1px;
}
And the important HTML part: 还有重要的HTML部分:
<table><tr>
<td class='matchbool'>
<span>
Some Content
</span>
</td>
</tr></table>
Note that on hover the background of the <td>
does change. 请注意,悬停时
<td>
的背景确实发生了变化。
Your span is on display: none;
您的跨度正在
display: none;
this means the td has no propper size to hover over it. 这意味着td没有合适的大小可以悬停在其上。
Try: visibility: hidden;
尝试:
visibility: hidden;
or opacity: 0;
或
opacity: 0;
instead of display: none;
而不是
display: none;
. 。
visibility: visible;
and opacity: 1
to make it visible. 和
opacity: 1
以使其可见。
td.matchbool {
text-align: center;
box-shadow: inset 0px 0px 0px 10px #fff;
}
td.matchbool:hover{
background:#e2e236;
width:400px;
}
td.matchbool span{
visibility: hidden;
}
td.matchbool:hover span{
z-index: 9999;
width: 300px;
border-left: 5px solid #e2e236;
visibility: visible;
padding: 1px;
}
You are hiding the only element in the single row, single column table. 您将隐藏单行单列表中的唯一元素。
This makes the HTML collapse to save space for other controls in the page. 这会使HTML折叠起来以节省页面中其他控件的空间。
That does not mean that hover
function is gone. 这并不意味着
hover
功能已消失。 It just means that the space taken up by the span
will not be "reserved" as if it is invisible. 这只是意味着
span
占用的空间将不会被“保留”,就好像它是不可见的一样。
To make it more simple: if you want the cell to take the same space as it should when hovering over it, then I suggest you re-write your CSS to preserve the size of the cell, even if its content is not visible. 为了使其更简单:如果希望该单元格悬停在单元格上时,它所占用的空间应该相等,那么我建议您重新编写CSS以保留该单元格的大小,即使其内容不可见。
One way to do so is to make the font color white, but that is a lousy way. 一种方法是将字体颜色设置为白色,但这是一种糟糕的方法。
I have included a snippet code to convince you that the cell is there, and hover works but you need to know where to point your mouse pointer. 我提供了一个片段代码来说服您该单元已在其中,并且悬停可以工作,但是您需要知道将鼠标指针指向何处。 For that, I have added extra padding to the
td
and made it with a border so you know where to put the cursor. 为此,我在
td
添加了额外的填充,并为其加上了边框,以便您知道将光标放在何处。 once your mouse is inside the border, the hover
functionality will kick in and you will see the span
一旦鼠标进入边框,
hover
功能就会启动,您会看到span
td.matchbool { text-align: center; box-shadow: inset 0px 0px 0px 10px #fff; padding: 10px; border: 1px dashed grey; } td.matchbool:hover { background: #e2e236; width: 400px; } td.matchbool span { display: none; } td.matchbool:hover span { z-index: 9999; width: 300px; border-left: 5px solid #e2e236; display: block; padding: 1px; }
<table> <tr> <td class='matchbool'> <span>Some Content</span> </td> </tr> </table>
For td.matchbool span
and td.matchbool:hover span
, use the visibility
property instead of display
. 对于
td.matchbool span
和td.matchbool:hover span
,使用visibility
属性,而不是display
。 An invisible element will leave its space for the mouse to interact whereas non-displayed elements cannot be interacted with the mouse at all. 一个不可见的元素将留出空间供鼠标交互,而未显示的元素则根本无法与鼠标进行交互。
td.matchbool span
{
display: block;
}
remove display:none from it and you will see the content 从中删除display:none,您将看到内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.