Hover on both – Label and Input

Винаги, когато използвам checkbox, radio бутони, dropdown списъци…, т.е. input полета, в които не се въвеждат данни от потребителя, а също и label към тях им добавям стил, който обръща курсора на мишката в поинтер. В допълнение слагам и стил към :hover състоянието им за подобряване на потребителското взаимодействие с елементите.

Например:
<style type="text/css" media="screen">
  label, input {cursor:pointer}
  label:hover, input:hover {background:#ff0}
</style>

С времето се убедих, че е по-интуитивно за потребителите и с голяма лекота избират необходимите действия.

Наскоро получих „прозрение“, така де – задачка закачка, когато се активира :hover състоянието на input полето да се активира и на съответния етикет и обратно. Пък и да работи за IE5.5 и IE6 – една исторически наследена обемна форма за регистриране на данни, която един ден ще взема да пренапиша, но до тогава… :о)

До тогава jQuery. Сигурно си мислите, че е проста задачка, но в asp.net среда си е кошмар да прихващаш IDта. Видът им в браузъра е ctl00_ctl16_g_7de5a2d2_7a38_44da_a450_46c7a4406ed4_ctl00_LFBF2. Е, все пак си е проста задачка.

$('label').hover(function() {
  var forAttr = $(this).attr('for');
  $(this).toggleClass('labelHover');
  $('input[id='+forAttr+']').toggleClass('inputHover');
});
$('input').hover(function() {
  var idAttr = $(this).attr('id');
  $(this).toggleClass('inputHover');
  $('label[for='+idAttr+']').toggleClass('labelHover');
});

Voici l’exemple. Това е цялата структура. Тя прихваща всички етикети и input полета на страницата и при :hover активира едновременно, на обвързаните елементи, съответните класове.

6 мнения по „Hover on both – Label and Input

  1. косе,
    толкова сложни неща пишеш понякога.
    да.
    направо мъка за обикновения потребител.
    мъка, казвам ти.

  2. Перфектен си както винаги, но ето ти нова задачка закачка:
    в случая с радио-бутоните би било ефектно ( и ефективно) в някои случаи ако сложиш постоянно ‘подчертаване’ на избрания елемент

  3. Просто ми стана интересно, има ли някаква определена причина да поддържаш IE5.5 и IE6 , все още ? :)))

  4. Имаме няколко приложения от външни вендори, чийто фронт енд е изграден за IE6… а бюрократичната машина се задвижва малко бавно и миграцията им засега е в… ъм :о) няма да е много скоро…

Вашият коментар