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

http://jsfiddle.net/mowglisanu/ZPVSU/

Answer 2

使用jQuery可以很容易。

<强> CSS

div.Message{
    display:none;
}

<强> HTML

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

<强>的jQuery

$('.Welcome').hover(
    function () {
    $('.Message').show();
  }, 
    function () {
    $('.Message').hide();
  }
);

示例： http://jsfiddle.net/gxn34/

修改

要回答以下问题

您需要在页面中添加以下内容，通常在<head>部分
中
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

并且

<script> $(document).ready(function(){ $('.Welcome').hover( function () { $('.Message').show(); }, function () { $('.Message').hide(); } ); }); </script>

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

2 个答案: