Question

我的格式为divs

<div class="box">
    <div class="button">B</div>
</div>
<div class="box">
    <div class="button">B</div>
</div>
<div class="box">
    <div class="button">B</div>
</div>

我希望在.button父母的徘徊时显示每个.box。怎么样？

Answer 1

只需使用CSS：

.box:hover .button {
    display: block;
}

Answer 2

使用CSS：

.button { display: none; }
.box:hover > .button { display: block; }

Answer 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
.box {width: 30px; height:30px; margin:5px; display: block; float:left; cursor:default; font-size: 24px; font-weight:bold; padding: 5px; border: 1px #009 solid; background-color:#DFCCF4; text-align:center;}
.button {display: none;}
</style>
<script>
$(document).ready(function(e) {
    $('.box').mouseover(function(){
        $('.button',this).show();
    });
    $('.box').mouseout(function(){
        $('.button',this).hide();
    }); 
});

</script>
</head>

<body>

<div class="box">
  <div class="button">B</div>
</div>
<div class="box">
  <div class="button">B</div>
</div>
<div class="box">
  <div class="button">B</div>
</div>

</body>
</html>

Answer 4

假设你不能使用:hover CSS伪选择器（因为它不适用于IE 6中的非锚元素），那么以下内容将起作用：

CSS

.box .button { display: none; }

的jQuery

$(".box").hover(
    function() {
        $(".button", this).show();
    },
    function() {
        $(".button", this).hide();
    }
)

递归jQuery选择

4 个答案: