Home/ Questions/Q 6879019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T04:47:42+00:00

I have divs in the following format <div class=box> <div class=button>B</div> </div> <div class=box>

  • 0

I have divs in the following format

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

I want to display each .button when their .box parent is hovered. How?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!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>
    • 0