How do I change the class name of element "B" onFocus element "A"

I'm building an accessible site to play YouTube videos for people with disabilities. I'm using onfocus (and changing classnames) rather than use :focus so that its compatible with more browsers to give visual feedback on the lin开发者_Go百科k selected.

I'd like to style the list item background when a text/img link gets keyboard focus - is this possible?

Many thanks,

Mike

I don't know if <li> can get (keyboard) focus programmatically, but I can show you how to change classnames programmatically.

[edit based on comment] If it's hrefs you mean, here is a working example. Use tab to jump to the next href.

"use strict";  
(function () {

  var refs = document.getElementsByTagName('a'); 
  document.addEventListener('focus', hoverClass, true);

  refs[0].focus();
  setTimeout(emulateHover, 800);

  function emulateHover() {
     if (!document.activeElement.href) {return clearTimeout(0);}
     var index = parseInt(document.activeElement.href.split(/#/)[1], 10);
     var activeElement = refs[index] || refs[0];
     if (activeElement) { activeElement.focus(); }
     setTimeout(emulateHover, 800);
  }

  function hoverClass(evt){
      var srcEl = evt.srcElement || evt.target;
      var i = refs.length;
      while(i--) { refs[i].className = 'a'; }
      if (srcEl && !/a/i.test(srcEl.tagName)) { return clearTimeout(0); }
      var isA = /a$/i.test(srcEl.className);
      srcEl.className = isA ? 'b' : 'a';
  }
  
}());

body {
  font: normal 12px/15px verdana, arial;
}
.a {background-color: #eee; transition: all 0.5s 0s}
.b {background-color: green; color:white; transition: all 0.5s 0s}
a {text-decoration: none;}

<ul>
    <li><a id="first" class="a" href="#1">line 1</a></li>
    <li><a class="a" href="#2">line 2</a></li>
    <li><a class="a" href="#3">line 3</a></li>
    <li><a class="a" href="#4">line 4</a></li>
    <li><a class="a" href="#5">line 5</a></li>
    <li><a class="a" href="#6">line 6</a></li>
</ul>

to set a new value of the class you can do:

element.className = "A";

if you use jQuery you can:

$(element).addClass("A");
$(element).removeClass("B");

I don't think it sounds nice to use focus (never tried if it works) for such HTML elements like list. Instead use hover.

I would go with following ; hover, mouseenter, mouseover.

$("ul.someclass > li").mouseenter(function() {
    $(this).addClass("current");
  }).mouseleave(function() {
    $(this).removeClass("current");
  });

For more information;

http://api.jquery.com/mouseover/

http://api.jquery.com/hover/

Found a messy method that seems to work ok:

<?php while ($row = mysql_fetch_assoc($result)) {

$js  =  "<script language=\"javascript\">";
$js .=  "function changeClass$id(){";
$js .=  "document.getElementById(\"$id\").setAttribute(\"class\", \"popfocus\");}";
$js .=  "function changeClass1$id(){";
$js .=  "document.getElementById(\"$id\").setAttribute(\"class\", \"pop\");}";
$js .=  "</script>";

echo $js;
echo "<li><div id=\"$id\" class=\"pop\">\n";
echo "<a 

onFocus=\"changeClass$id()\" 
onBlur=\"changeClass1$id()\"
onMouseover=\"changeClass$id()\" 
onMouseout=\"changeClass1$id()\"