Показать элемент при наведении курсора на родителя

У меня есть таблица HTML, и я бы хотел, чтобы содержимое одной ячейки (<td>) было скрыто, если только мышь не зависает над родительской строкой (<tr>).

Довольно просто показать элемент при наведении, но я не уверен, как показать другой элемент, кроме того, над которым зависает.

Можно ли это сделать только с помощью CSS или мне нужен какой-то JavaScript? (У меня есть jQuery и jQuery UI.)


html css
person Jonathan Wood    schedule 17.02.2012    source источник

Ответы (3)


arrow_upward
7
arrow_downward 

tr:hover > td {
    display:inline;
}

Это предполагает, что все, что вы скрываете, скрыто с помощью display:none;. Просто используйте любое свойство, подходящее для вашей ситуации.

EDIT: я изменил его на display:inline, потому что в случае с таблицами вы, вероятно, хотите, чтобы ячейки оставались рядом друг с другом, а не сверху и снизу.

Пример.

person Purag    schedule 17.02.2012
comment
Спасибо. Однако это вызывало кучу проблем с форматированием. Кажется, лучше поместить <div> в ячейку с классом command-panel. Но, похоже, я могу изменить ваш код. Я пробовал tr:hover > div.command-panel { display:block; }, но это неправильно. - person Jonathan Wood; 17.02.2012
comment
@Pumou: я попробовал пример jsfiddle.net/YLHke/1, но он не работает для меня. что в этом не так?? - person Sunil Kumar B M; 17.02.2012
comment
@SunilKumarBM: он работает, о чем свидетельствует тот факт, что он немного смещается. Дело в том, что вы не выбираете скрытую строку в селекторе hover. - person Purag; 17.02.2012
comment
@JonathanWood: используйте tr:hover > td div.command-panel {display:block;}. - person Purag; 17.02.2012
comment
Какие необходимые изменения мне нужно сделать ?? - person Sunil Kumar B M; 17.02.2012
comment
@Sunil: Пожалуйста, укажите, какой браузер вы используете. У меня работает в Chrome и IE9. О, я вижу, измененный код не работает. - person Jonathan Wood; 17.02.2012
comment
@SunilKumarBM: Поскольку вы задаете совсем другой вопрос, вам лучше задать новый вопрос. Вы можете связать это здесь, чтобы я ответил. - person Purag; 17.02.2012

arrow_upward
2
arrow_downward

Что бы я сделал, так это установил div внутри этого td, установил его непрозрачность на 0 и добавил такой переход

.command-panel {
   opacity: 0;
   -moz-transition: opacity 0.3s ease 0s;
   -webkit-transition: opacity 0.3s ease 0s;
   -ms-transition: opacity 0.3s ease 0s;
   -o-transition: opacity 0.3s ease 0s;
   transition: opacity 0.3s ease 0s;
}

tr:hover .command-panel {
   opacity: 1;
}

таким образом у вас будет красивая, но достаточно короткая анимация

person Andrei S    schedule 17.02.2012
comment
Хммм... -moz-transition не выглядит очень общим для всех браузеров. - person Jonathan Wood; 17.02.2012
comment
ну, это только для firefox, как я уже упоминал в комментарии, вам нужно добавить остальное для других браузеров (это можно легко сделать с помощью миксина, если вы будете использовать что-то вроде SCSS и Compass). Я изменил ответ с тем, что генерирует компас - person Andrei S; 17.02.2012

arrow_upward
1
arrow_downward

Пожалуйста, попробуйте это:

    <head></head>
    <body>
        <table style="border: 1px solid #ccc">
            <tr  onmouseover="document.getElementById('mytd').style.display='block'"
                 onmouseout="document.getElementById('mytd').style.display='none'"
                 >
                <td>
                    fgfgdgd1

                </td>
                 <td style="display:none" id="mytd">
                    fgfgdgd1

                </td>

            </tr>

        </table>

    </body>
</html>
person Varada    schedule 17.02.2012
comment
Спасибо. Если я собираюсь написать сценарий, я, вероятно, буду использовать jQuery. Но я предпочитаю использовать CSS, если это возможно. - person Jonathan Wood; 17.02.2012