盒子阴影无法正常工作答案

【问题标题】：box-shadow not working properly盒子阴影无法正常工作
【发布时间】：2014-04-05 23:22:24
【问题描述】：

我有一个 div 标签，悬停在该 div 上，我想应用 box-shadow。在那个div 中有image、label 和link button。我只想应用于 div，而不是应用于该 div 内的每个项目。但是，当我悬停该div 的项目时，box-shadow 也会应用于该项目。

这里是代码

<div class="itemshow">
    <asp:DataList ID="dlLatestItem" runat="server" RepeatDirection="Horizontal" DataKeyField="Pro_Id">
        <ItemTemplate>
            <div class="itemList">
                <table>
                    <tr>
                        <td colspan="3">
                            <asp:Image ID="imgPro_Latest" runat="server" Width="200" Height="200" ImageUrl='<%#Eval("Image") %>' />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="offer">
                                <asp:Label ID="lblOffer" runat="server" Text='<%#Eval("Offer") %>'></asp:Label>
                            </div>
                        </td>
                        <td>&nbsp;</td>
                        <td>
                            <div class="cart">
                                <asp:LinkButton ID="lnkCArt" runat="server">Add to Cart</asp:LinkButton>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="text-align:center">
                            <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="ViewItem">
                                <asp:LinkButton ID="lnkView" runat="server">View Item</asp:LinkButton>
                            </div>
                        </td>
                        <td>&nbsp;</td>
                        <td>
                            <div class="price">
                                <asp:Label ID="lblPrice" runat="server" Text='<%#Eval("Price") %>'></asp:Label>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </ItemTemplate>
    </asp:DataList>
</div>

这是css的代码

.itemList {
    margin: 5px 18px 5px 0;
    border: 2px solid #5499c3;
    border-radius: 8px;
}
.itemList :hover {
    -moz-box-shadow: 0 0 10px #000000;
    -webkit-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
}

【问题讨论】：

您是否厌倦了将px 添加到每个0 值？

标签： jquery html asp.net css

【解决方案1】：

删除.itemList和:hover之间的空格

.itemList {
    margin: 5px 18px 5px 0;
    border: 2px solid #5499c3;
    border-radius: 8px;
}

.itemList:hover {
    -moz-box-shadow: 0 0 10px #000000;
    -webkit-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
}

【讨论】：