0

我正在使用 div 为文本和图像设置背景框的样式。我发现了一个 css 类，当整个盒子悬停在上面时，它会启用阴影。但是，因为所有内容都在该 div 中，所以文本也有阴影。除了可能比我正在做的更好的创建背景框的方法之外，我不知道如何解决这个问题？

这是我的代码：http: //jsfiddle.net/dF9BF/

<div class= "shadow" style="position: absolute; width: 870px; height: 180px; background-    color: #ffffff; border: 1px solid black; border-radius: 6px;"><a href="LINK"</a>
<table border="0" cellspacing="0" cellpadding-left= "0px">
<tbody>
<tr>
<td style= "border: 0px; align: left; padding: 0px"><img src= "IMAGE" style= "height: 180px; align: left"></td>
<td style= "width: 50%; border: 0px; text-align: left; padding-left: 20px">
<div style="width: 310px; height: 35px; background-color: #3589d0; border: 0px; border-radius: 6px; align: left"><img class= "alignleft" align: left; src= "IMAGE" style= "margin-left: 5px" "margin-top: 10px" "padding-top: 15px" "padding-left: 10px" "padding-right: 0px" "align: left"><p style= "color: #ffffff; padding-top: 8px; padding-left: 0px">TEXT TEXT</p>
<br>
<br><p style= "color: #636363; font-size: 21pt"> MORE TEXT</p>
<br>
<p style= "color: #636363; font-size: 16pt"><em>TEXT
</em></p></div>
</td>
<td style="width: 100%; text-align: right; padding-right: 30px; padding-top: 0px;"><img src= "IMAGE" width= "100px">
<br><br>
<span style="font-size: 16pt; color: #025799;  margin-top: 10px">skdjfkjahf</span>&nbsp;&nbsp;&nbsp;<span style="font-size: 16pt; color: #949494;">        <strike>asjdfklsajdf</strike></span>

</td>
</tr>
</tbody>
</table>
</div>

CSS： 

div.shadow {
width: 300px;
margin: 20px;
border: 1px solid #ccc;
padding: 10px;
}

div.shadow:hover {
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

谢谢！

4

1 回答 1

1

考虑到这个问题目前没有代码，我想说有两种方法可以做你想做的事：

  1. 确保您编写的 CSS 属性仅适用于父 div（或）
  2. 试图取消设置子元素的 CSS 属性。

示例 1：

<style type="text/css">
  #styled { box-shadow: 2px 2px 5px #000; }
</style>
<div id="styled">
 <p>Test. This p will not have any shadows.</p>
</div>

示例 2：

 <style type="text/css">
   #styled { font-size: 15px; }
   #styled p, #styled a, #styled div, #styled span { font-size: 10px; }
 </style>
 <div id="styled">
   <p>This p will have a font-size of 10px.</p>
 </div>
于 2013-09-18T05:30:50.393 回答