Make div clickable and use CommandName=“Select”

Question

This code below works fine, when I click on the LinkButton the select will get fired.

However I have a hover style on the div so that it will change color if the mouse enters. This is confusing for users because when they click on the div nothing happens, only when they click on the LinkButton .

I want the CommandName="Select" to fire when a user clicks on the div . How can I do this?

<ItemTemplate>
    <div class="Card">
        <h4>
            <asp:LinkButton ID="SelectButton" Text='<%# Eval("Name") %>' CommandName="Select" runat="server"/> 
        </h4>
        <asp:Label runat="server" Text='<%# Eval("date") %>' />
        <asp:Label runat="server" Text='<%# Eval("location") %>' />
        <br />
    </div>
</ItemTemplate> 

Answer 1

You can use jquery to trigger click event of button on click of the div

$("#Card").click(function(){
    $("[id$=SelectButton]").trigger('click');
});

Answer 2

I fixed my issues by placing the LinkButton outside the div . Now the whole div is clickable in the DataList .

<ItemTemplate>
    <asp:LinkButton CommandName="Select" runat="server">
        <div class="Card">
            <h4>
                <asp:Label runat="server" Text='<%# Eval("Name") %>'></asp:Label>
            </h4>
            <asp:Label runat="server" Text='<%# Eval("date") %>' />
            <asp:Label runat="server" Text='<%# Eval("location") %>' />
            <br />
        </div>
    </asp:LinkButton>
</ItemTemplate>