3

Basically, I have a <nav> element with an <ul> in it for navigation items. Using JavaScript I want to change the color or background-color of a list item I hover over. I've got this to work with one item (by id) in the w3 test utility, but how would I do it for all of them?

my nav:

         <nav>
            <ul>
                <li><a href="home.html">Home </a></li>
                <li><a href="about.html"> About </a></li>
                <li><a href="experience.html"> Experience </a></li>
                <li><a href="contact.html"> Contact </a></li>
            </ul>
        </nav>

(Minus a form input submitting to a post page)

Additionally, I would like to get this working all within my js file, but I couldn't get that working in W3.

EDIT

I apologize for the poor post and method of supplying code.

Now, I've developed a solution based on the reply from @Adam-Buchanan-Smith :

<nav>
      <ul>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="home.html">Home </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="about.html"> About </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="experience.html"> Experience </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="faq.html"> FAQ </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="references.html"> References </a></li>
           <li onmouseover="hover(this)" onmouseout="hoverOff(this)"><a href="contact.html"> Contact </a></li>
       </ul>
</nav>

JS:

function hover(element)
{
    element.style.backgroundColor = "red";
}
function hoverOff(element)
{
    element.style.backgroundColor = "#000079";
}

it seems to work, but can someone please explain why/how JS 'uses

style.backgroundColor

To change the color, while CSS uses:

background-color:

JavaScript Usage Rational

I know it seems silly to not use CSS, but I am doing this for a final project and the prof wants JS. No, I am not trying to have others do my work, I just wanted some guidance -- and thank you for that.

Community
  • 1
  • 1
DevonRyder
  • 193
  • 1
  • 7
  • 19

2 Answers2

3

Just use CSS...

nav > ul > li a:hover {
  color: red;
}
<nav>
  <ul>
    <li><a href="home.html">Home </a></li>
    <li><a href="about.html"> About </a></li>
    <li><a href="experience.html"> Experience </a></li>
    <li><a href="contact.html"> Contact </a></li>
  </ul>
</nav>

Doing that in JS is silly, but if you really have to for some reason then there's 2 main ways:

  • Attach event handlers to individual links

[].forEach.call(document.querySelectorAll('nav > ul > li a'), function (link) {
    link.addEventListener('mouseover', coloringHandler);
    link.addEventListener('mouseout', decoloringHandler);
});

function coloringHandler() {
    this.dataset.initialInlineColor = this.style.color;
    this.style.color = 'red';
}

function decoloringHandler() {
    this.style.color = this.dataset.initialInlineColor;
}
    <nav>
      <ul>
        <li><a href="home.html">Home </a></li>
        <li><a href="about.html"> About </a></li>
        <li><a href="experience.html"> Experience </a></li>
        <li><a href="contact.html"> Contact </a></li>
      </ul>
    </nav>
  • Use event delegation which consists of attaching the listeners on a container element and rely on event bubbling or capturing to handle children events (note that this event delegation implementation is naïve).

var nav = document.querySelector('nav');

nav.addEventListener('mouseover', withLinkEl(coloringHandler));
nav.addEventListener('mouseout', withLinkEl(decoloringHandler));

function coloringHandler() {
  
  this.dataset.initialInlineColor = this.style.color;
  this.style.color = 'red';
}

function decoloringHandler() {
  this.style.color = this.dataset.initialInlineColor;
}

function withLinkEl(fn) {
  return function (e) {
    if (e.target.tagName !== 'A') return;
    
    fn.call(e.target);
  };
}
<nav>
  <ul>
    <li><a href="home.html">Home </a></li>
    <li><a href="about.html"> About </a></li>
    <li><a href="experience.html"> Experience </a></li>
    <li><a href="contact.html"> Contact </a></li>
  </ul>
</nav>
plalx
  • 42,889
  • 6
  • 74
  • 90
  • Quoted from question " Using JavaScript I want to change the color or background-color of a list item I hover over. " that is not javascript :/ – Adam Buchanan Smith Dec 08 '15 at 21:07
  • 1
    @AdamBuchananSmith in this case it's not clear that the OP MUST have the answer in javascript, more than likely they were unaware that this was possible using CSS – bwegs Dec 08 '15 at 21:09
  • I read the question like OP, is using a tutorial and the background color is just being used to show the hover event. Look at the image OP supplied. – Adam Buchanan Smith Dec 08 '15 at 21:11
  • @AdamBuchananSmith Fair enough, I updated the answer. – plalx Dec 08 '15 at 21:40
  • @plalx your updated question fits the OP's question now. See the updated question "I know it seems silly to not use CSS, but I am doing this for a final project and the prof wants JS." <--- see just by reading the question I figured that much out :) – Adam Buchanan Smith Dec 08 '15 at 23:05
  • @AdamBuchananSmith That's an edit the OP made after I already answered... I can't see the future ;) – plalx Dec 09 '15 at 13:19
2

Here it is using javascript https://jsfiddle.net/5egjjv91/

<nav>
  <ul>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="home.html">Home </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="about.html"> About </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="experience.html"> Experience </a></li>
    <li onmouseover="changeTo(this)" onmouseout="changeBack(this)"><a href="contact.html"> Contact </a></li>
  </ul>
</nav>
<script>
  function changeTo(x) {
    x.style.backgroundColor = "red";
  }

  function changeBack(x) {
    x.style.backgroundColor = "white";
  }

</script>
Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
  • @ryderd Using inline handlers is an horrible solution... http://stackoverflow.com/questions/11737873/why-is-inline-event-handler-attributes-a-bad-idea-in-modern-semantic-html – plalx Dec 09 '15 at 13:22
  • @plalx you really want that correct check mark huh?! Why did you argue with me about the solution for so long, then turn around and say I was correct, then build a better answer, now coming back and trying to reverse the OP's correct marking, why didn't you just answer the question right from the beginning then? lol, go ahead, take my answer make it better then talk crap about mine.... troll lol – Adam Buchanan Smith Dec 09 '15 at 17:24
  • Argue with you about the solution? I did not argue, I immediately agreed to your comment and updated my answer accordingly. Take your solution? My solution and yours are nothing alike! I'm not sure in which dream you are living in. I don't care about getting the mark, but I do care about the OP's knowledge and that's why I think it was important to mention that inline handlers should be avoided. – plalx Dec 09 '15 at 21:46
  • You still are not getting the point, the OP's prof gave him an example, that example had inline handlers in it, just like CSS is a better way, your answer is also a "better" way, however it was not what the OP was asking for, do you understand?!?! – Adam Buchanan Smith Dec 09 '15 at 22:07
  • Where did you see the example the prof gave him? It's not even in the question. I guess you made that up too... – plalx Dec 10 '15 at 13:32
  • Yeah, OP removed it after updating the question, if you didn't see it sorry, lol – Adam Buchanan Smith Dec 10 '15 at 17:11
  • It was a W3 example, stated as such in the question. – plalx Dec 10 '15 at 18:53