Как отключить класс css для определенного внутреннего тега div, когда div является фоновым полем?

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

Благодарю!

Теги:
class
styles

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>
Поделиться
  • 0
    Спасибо! Можете ли вы увидеть мой код выше и сказать, как бы я применил любое из этих решений?
  • 0
    Ум его работает сейчас! Понятия не имею почему. Ха спасибо в любом случае!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню