CODEWITHSUNDEEP
htmlcss
Sizzling Code
Sizzling Code

Reputation: 6070

CSS is it possible to use element after :hover?

Is it possible to use element after hover effect

I tried like this

.tableclass tr td:hover a{
   color:#fff;
}

what i am trying to do that when i hover the td so then anchor link inside that td should change its color to white..

here is how i tried my self but not working for me?

.GridAlternate td:hover a , .GridRowStyle td:hover a{
    color:#fff;
}

My GridView HTML

<table cellspacing="0" border="1" style="border-collapse:collapse;" id="GV_Users" rules="rows" class="DefaultGridStyle">
                        <tbody><tr class="GridHeader">
                            <th scope="col">User Name</th><th scope="col"><a href="javascript:__doPostBack('ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users','Sort$RoleName')">Role Name</a></th><th valign="middle" align="left" style="width:22%;" scope="col">LogIn</th><th valign="middle" align="center" style="width:33%;" scope="col">Action</th>
                        </tr><tr class="GridRowStyle">
                            <td>
                                Ali Nisarr
                            </td><td>
                                Admin
                            </td><td valign="middle" align="left">
                                [email protected]
                            </td><td valign="middle" align="center">
                                <a href="javascript:__doPostBack('ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users$ctl02$Lbtn_change','')" class="editlinkbutton" id="Lbtn_change">Edit</a>
                                <a href="javascript:__doPostBack('ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users$ctl02$Lbtn_Remove','')" class="removelinkbutton" id="Lbtn_Remove">Remove</a>

                                <a href="javascript:__doPostBack('ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users$ctl02$Lbtn_Disable','')" class="removelinkbutton" id="Lbtn_Disable">Disable</a>

                            </td>
                        </tr><tr class="GridAlternate">
                            <td>
                                Nizam Ullah
                            </td><td>
                                Admin
                            </td><td valign="middle" align="left">
                                [email protected]
                            </td><td valign="middle" align="center">
                                <a href="javascript:__doPostBack('ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users$ctl03$Lbtn_change','')" class="editlinkbutton" id="Lbtn_change">Edit</a>
                                <a href="javascript:__doPostBack('ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users$ctl03$Lbtn_Remove','')" class="removelinkbutton" id="Lbtn_Remove">Remove</a>

                                <a href="javascript:__doPostBack('ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users$ctl03$Lbtn_Disable','')" class="removelinkbutton" id="Lbtn_Disable">Disable</a>

                            </td>
                        </tr><tr>
                            <td colspan="4">
                        <table class="GridPager">
                            <tbody><tr>
                                <td width="7%">
                                    Showing 
                                    :
                                </td>
                                <td width="5%">
                                    <span id="lbl_rowstartindex">1</span>
                                    &nbsp;-
                                </td>
                                <td>
                                    <span id="lbl_rowendindex">2</span>
                                </td>
                                <td>
                                    of
                                </td>
                                <td>
                                    <span id="lbl_totalrecords">2</span>
                                </td>

                                <td width="50%" align="center">

                                    &nbsp;

                                    &nbsp;

                                    &nbsp;

                                    &nbsp;

                                    &nbsp;

                                    &nbsp;

                                </td>
                                <td width="18%" align="right">
                                    Displaying per page:
                                </td>
                                <td align="left">
                                    <input type="text" id="TxBx_PageSize" maxlength="3" value="10" name="ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users$ctl05$TxBx_PageSize">

                                </td>
                                <td align="left">
                                    <a href="javascript:__doPostBack('ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users$ctl05$lb_Change_RowsPerChange','')" id="lb_Change_RowsPerChange">Change</a>
                                </td>
                            </tr>
                        </tbody></table>
                    </td>
                        </tr>
                    </tbody></table>

Am i doing something wrong or is there any other approach i should follow?

Upvotes: 3

Views: 333

Answers (3)

Idrees Khan
Idrees Khan

Reputation: 7752

try this;

tr.GridAlternate td:hover a , tr.GridRowStyle td:hover a{
    color:#fff;
}

And make sure to insert this at the end of the style sheet. Maybe it is being override by other class. I hope this helps

Upvotes: 2

John Doe
John Doe

Reputation: 2924

Why dont you try .tableclass td:hover a { color:#fff; }

Upvotes: 0

pochen
pochen

Reputation: 873

http://codepen.io/princemaple/pen/Dcxdi

It's totally working for me.
I assume some of your rules are wrongly cascaded?
Like you have more specific targeting rules overrides this rule...

Upvotes: 2

Related Questions