Question

我有这种性质的div标签：

<td>
  <a href="" style="text-decoration: none">
  <div id="navigation_div">
     <div class="functiontitle">
        <font face="helvetica" color="darkgreen"><b><center>Revenues & Expenses</center> </b>        </font>                   
     </div>
     <div class="summary">
        <font face="arial" color="black"><center>At-a-glance and detailed information on  all revenues and expenses incurred</center></font>
     </div>
     <div class="functionimage">
         <img src="../../common/images/revenue_expenses.png" width="60" height="60" style="margin:-18px 2px 6px 9px;"/>
     </div>
  </div>  
  </a> 
</td>

上述代码片段的CSS是：

#navigation_div{
   height: 165px;
   width: 195px;
   align:center;
   border-radius: 10px;
   background-color: #eef3fa; 
   background: -webkit-linear-gradient(top, #eef3fa, #DBE2DC); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
   background: linear-gradient(to bottom, #eef3fa, #DBE2DC); 
   border: 2px solid #787878;
   box-shadow: 0px 0px 27px rgb(204, 204, 204) inset;
 }

#navigation_div:hover{  
   box-shadow: 0px 0px 80px rgb(204, 254, 204) inset;
   cursor: pointer;
}

.functiontitle{
   margin-top:10px;
 }

.summary{
   margin-top:5px;
   margin-bottom:22px;
}

.functionimage{
   float: right;
   margin-top: 2px;
   margin-right: 2px;
   margin-bottom: 7px;
}

我正在寻找的是当我在#navigation_div上使用onClick（）时，＃navig_div应该看起来有点浅黑色（可能使用不透明度），＃navigation_div中的内容清晰可见＆amp;＆amp;我应该得到两个图像（收入和费用），如果我点击任一图像，它应该转到revenue.php或expense.php

这两张图片中描述了我打算在结尾处得到的结果，我将它放在这里： http://www.imagesup.net/?di=8140319629414 http://www.imagesup.net/?di=414031962941

Answer 1

我在jsfiddle中做了一个快速解决方案，这可能会帮助你开始。这是一个形象; onClick，显示一个带有链接的重叠div。背景有一些padding来表明它们确实是分开的，但如果你删除它并略微调整margin-left .overlay，它应该是完美的。希望有所帮助！

http://jsfiddle.net/WLXL6/2/

Answer 2

在display:none;

之前添加样式为functionimage的子菜单元素

然后添加一个jQuery选择器来绑定你的click事件或悬停事件，具体取决于你想要的那个：

$('#navigation_div').click(function(){
    $(this).find('.subitem').css('display','block');
});

如果你希望它们在鼠标移动时再次消失，你可以这样做：

$('#navigation_div').hover(function(){
    $(this).find('.subitem').css('display','block');
}, function(){
    $(this).find('.subitem').css('display','none');
});

对于叠加层，只需创建一个覆盖box-shadow的.overlay css类：

.overlay
{  
    box-shadow: 0px 0px 300px rgb(0,0,0) inset !important;
}

并将其添加到活动中的元素：

$(this).addClass('overlay');

修改：请参阅此jsfiddle

单击或悬停时，在嵌套div的顶部显示带有图像和超链接的div

2 个答案: