[Solved] box-shadow not working properly

[Amit12x]

i have a div tag , on hover on that div , i want to apply box-shadow. in that div , there is image, label, and link button . i just want to apply on div ,not to each item that are inside of that div. but when i hover item of that div , box-shadow is applied to that item to too. here is code.

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

here is code for 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;
    }

this css is applied to each item of div .due to which every item getting shadow on hover.

[Paulie_D]

change this

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

to this

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

[Amit12x]

thanks . now it’s wroking

[Author]

Posts