Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] box-shadow not working properly

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #164630
    Amit12x
    Participant

    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.

    #164631
    Paulie_D
    Member

    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;
        }
    
    #164632
    Amit12x
    Participant

    thanks . now it’s wroking

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.