悬停在元素上时取消隐藏元素

Question

需要一点CSS帮助!我希望在另一个元素悬停时取消隐藏元素.

例如:

<div class="Welcome"><a>Welcome to our site<a><div>
<div class="Message">Thanks for touching me!<div>

CSS

.Message {
    display: hidden
}

.Welcome a: hover {
/*I want to make .Message visible now. Any ideas?*/
}

Answer 1

当您悬停在.Welcome .Message显示状态时,这是您可以获得的最佳效果.这使用相邻的兄弟+选择器.

.Message {
    display: none;
}

.Welcome:hover + .Message {
    display:block;
}