PROGRAMMING APPEARANCE OF DROPDOWNLIST HOVER ITEMS

bankole · February 10th, 2011, 10:24 PM

Hello everyone since i started studying this great text by Imar i try to come up with ideas i can implement on my own. I visited microsoft's "www.dreamspark.com" and at the top right of this website. There is a Language dropdownlist(change language) which changes color when the mouse hovers on any of the list items this color also matches the color of the dropdownlist button. You can do a quick visit of the site to understand what exactly i want to achieve. I tried out my own code but succeeded only in underling and changing to italics, when my mouse hovers on one of the items in the dropdown list. Kindly help.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Play.aspx.cs" Inherits="Play" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="~/Player/Play.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="banky">
    
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
            onselectedindexchanged="DropDownList1_SelectedIndexChanged" 
            ForeColor="Red" BackColor="White">
            <asp:ListItem ID="bibi" Selected="True" >English</asp:ListItem>
            <asp:ListItem ID="bib">France </asp:ListItem>
            <asp:ListItem>Nigeria</asp:ListItem>
            <asp:ListItem>Egypt</asp:ListItem>
            <asp:ListItem>United Kingdom</asp:ListItem>
            <asp:ListItem>Sudan</asp:ListItem>
            <asp:ListItem>United States</asp:ListItem>
            <asp:ListItem>Belguim</asp:ListItem>
        </asp:DropDownList>
    
    </div>
    </form>
</body>
</html>

CSS FILE

Code:

#bibi:hover, #bib:hover
{
    font-family: 'Times New Roman' , Times, serif;
    font-size: larger;
    font-style: italic;
    text-decoration: line-through;
}

Thanks

Imar · February 11th, 2011, 05:07 AM

Hi there,

For questions not related to my book directly, please choose a different category such as one of the JavaScript forum here at P2P. You'll get better answers there.

Anyway, looks like they used some jQuery to implement this. Not all browsers (esepcially older versions of IE) support :hover on elements other than the <a>.

It's not an easy thing to implement and requires some jQuery scripting and / or ready made plugins. You may want to start here:

http://stackoverflow.com/questions/2...option-element
http://www.google.com/#q=jQuery+hover+option+element

Cheers,

Imar