Изменить выпадающий список CSS при нажатии или наведении указателя мыши?

Вдохновленный https://stackoverflow.com/questions/624102/enable-a-currently-disabled-dropdown-list-when-clicking-the-dropdown-list Я попробовал что-то, и я добавил серый фон к отключенному выбору.Изменить выпадающий список CSS при нажатии или наведении указателя мыши?

Проблема заключается в том, что когда я нажимаю на какой-либо выбор (какой переключатель был отключен), фон раскрывающегося списка остается серым.

Как я могу вернуть его к нормальной (белой) при нажатии, даже если переключатель не установлен?

Вы можете видеть, что здесь живут http://jsbin.com/okuca/

Вот мой фактический код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test </title> 
<style type="text/css"> 
    label.disabled select { opacity: 0.5; filter: alpha(opacity=50); background-color:#CCC; } 

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(function() { 
    $('div.formdiv').bind('click',function() { 
     $('label.disabled',this).removeClass('disabled'); 
     $('input:radio',this).attr('checked',true); 
     $('div.formdiv').not(this).find('label').addClass('disabled').find('select').attr('selectedIndex',0); 
    }).find('label').addClass('disabled'); 
    }); 
</script> 
</head> 

<body> 

<div class="formdiv"> 
    <label for="Name"> 
    <input id="Name" name="radio1" type="radio" />Name: 
    <select name="select1"> 
     <option value="Rose">Rose</option> 
     <option value="Lily">Lily</option> 
    </select> 
    </br> 
    </label> 
</div> 

<div class="formdiv"> 
    <label for="Colours"> 
    <input id="Colours" name="radio1" type="radio" />Colour: 
    <select name="select2"> 
    <option value="Red">Red</option> 
    <option value="Green">Green</option> 
    </select> 
    </label> 
    </br> 
</div> 

<div class="formdiv"> 
<label for="Sport"> 
    <input id="Sport" name="radio1" type="radio" />Sport: 
    <select name="select3"> 
    <option value="Tennis">Tennis</option> 
    <option value="Cricket">Cricket</option> 
    </select> 
    </label> 
    </br> 
</div> 
    </body> 
</html>

Вы можете редактировать его здесь: http://jsbin.com/okuca/edit

источник

2009-05-15 Mark

FYI, ваш пример отлично работает на firefox. Когда вы нажимаете на поле выбора, переключатель становится включенным. –

@Nadia. Проблема заключается в том, что если вы нажмете на раскрывающийся список отключенного переключателя, раскрывающееся меню по-прежнему будет выглядеть как «отключено», даже если оно будет выбрано. –

Проблема в том, что обработчик клика не увольнение до тех пор, пока вы не отпустите кнопку мыши (и выпадающее изображение исчезнет), поэтому стиль label.disabled select по-прежнему применяется.

Есть два способа исправить это. Во-первых, вы могли бы добавить еще одно правило CSS для :focus, который переопределяет инвалидов укладки:

label.disabled select:focus { opacity: 1.0; filter: alpha(opacity=100); background-color:white; }

Однако это может вовлечь вас в неприятности, если ваши стили получить более запутанным. Вместо этого, я рекомендовал бы изменить свой обработчик щелчка к MouseDown обработчика:

$('div.formdiv').bind('mousedown',function() {

Это вызывает обработчик в огонь (и класс должен быть удален) перед тем появляется выпадающий.

источник

2009-05-15 22:09:59

Спасибо за то, что я искал! :) – Mark

Изменить выпадающий список CSS при нажатии или наведении указателя мыши?

ответ

Смежные вопросы