Эффект наведения CSS не работает над диапазоном в таблице

После того, как он работал сначала, я (видимо) что-то изменил в своем CSS. После нескольких часов исследований я все еще не могу понять, почему содержимое моего <span> теперь больше не будет отображаться при наведении ...
Может ли кто-нибудь помочь мне, пожалуйста? Спасибо!Эффект наведения 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; 
}

И важный HTML часть:

<table><tr> 
    <td class='matchbool'> 
    <span> 
     Some Content 
    </span> 
    </td> 
</tr></table>

Обратите внимание, что при наведении курсора мыши на фоне <td> делает изменения.

источник

2015-07-01 Nina

У вас есть исходный код, прежде чем вы увидели проблему? Как бы то ни было, трудно точно знать, чего вы хотите. – cyberbit

Вы скрываете единственный элемент в единственной строке, одной таблице столбцов.

Это приводит к сглаживанию HTML, чтобы сэкономить место для других элементов управления на странице.

Это не значит, что hover функция уходит. Это просто означает, что пространство, занятое span, не будет «зарезервировано», как если бы оно было невидимым.

Чтобы сделать его более простым: если вы хотите, чтобы ячейка занимала то же пространство, что и при наведении на него, я предлагаю вам перезаписать свой CSS, чтобы сохранить размер ячейки, даже если ее содержимое невидимый.

Один из способов сделать цвет шрифта белым, но это отвратительно.

Я включил код фрагмента, чтобы убедить вас в том, что ячейка есть, и наведение работает, но вам нужно знать, куда указывать указатель мыши. Для этого я добавил дополнительное дополнение к td и сделал его с помощью рамки, чтобы вы знали, куда положить курсор. когда мышь находится внутри границы, 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>

источник

2015-07-01 13:45:45 Ahmad

@ Ответ l0w_skilled проще, но ваш хорошо показывает, что именно происходит. –

Благодарим вас за ответ. Вы очень хорошо объяснили, что происходит. Но я действительно хотел, чтобы «Некоторый контент» появлялся в другой ячейке вне ячейки таблицы при наведении. Думаю, я не объяснил это достаточно ясно в моем вопросе. Не могли бы вы дать мне еще один намек на то, как я могу это сделать? Это было бы прекрасно! – Nina

Хорошо, мне удалось это сделать сам. Еще раз спасибо за ваше замечательное объяснение. Это было очень полезно. – Nina

-1

td.matchbool span 
{ 
    display: block; 
}

удалить дисплей: нет от него, и вы увидите содержимое

источник

2015-07-01 13:30:57

OP хочет, чтобы он был скрыт, пока вы не наведете его родителя 'td' –

Ваш Спан находится на display: none; это означает, что тд не имеет размера Проппер парить над ним.

Попытка: visibility: hidden; или opacity: 0; вместо display: none;.

visibility: 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; 
}

источник

2015-07-01 13:31:42

Благодарим вас за ответ. С видимостью, а не с дисплеем, она работает, но исходная (не зависающая) ячейка таблицы теперь всегда имеет высоту «Некоторый контент», что не очень красиво. Не могли бы вы мне помочь, как я могу это исправить? Большое спасибо! – Nina

Я нашел лучшее решение самостоятельно с дисплеем, а не с видимостью, но еще раз спасибо за ваш ответ! – Nina

Для td.matchbool span и td.matchbool:hover span, используйте visibility свойство вместо display. Невидимый элемент оставит свое пространство для взаимодействия с мышью, тогда как не отображаемые элементы вообще не могут взаимодействовать с мышью.

источник

2015-07-01 18:52:00

Эффект наведения CSS не работает над диапазоном в таблице

ответ

Смежные вопросы