Is it possible to change a certain on hover over another certain item.

For example:

<li>
  <a href="#">test</a>
</li>

JS

var list = document.getElementById('li');
var link = document.getElementById('a');

list.onmouseover = function() {
    link.style.color = "#8080ff";
}

If i hover over the li item I want the text inside the a tag to change, but this code is not working.

I cant use css or jquery library.

/

Is it possible to change a certain on hover over another certain item.

For example:

<li>
  <a href="#">test</a>
</li>

JS

var list = document.getElementById('li');
var link = document.getElementById('a');

list.onmouseover = function() {
    link.style.color = "#8080ff";
}

If i hover over the li item I want the text inside the a tag to change, but this code is not working.

I cant use css or jquery library.

http://jsfiddle/Nt8Pq/40/

• javascript
• html

Share Improve this question Follow edited Oct 13, 2016 at 15:08 ThisClark 14.8k1010 gold badges7272 silver badges103103 bronze badges asked Oct 13, 2016 at 14:51 Kevin.aKevin.a 4,3261515 gold badges5151 silver badges9292 bronze badges 10

• 3 Why can't you use CSS? Also, I remend using event listeners. – evolutionxbox Commented Oct 13, 2016 at 14:52
• 3 Those are not ids, those are element-types. If JavaScript doesn't work then the first recourse is to Google the methods you're using to try and find out why it doesn't work. – David Thomas Commented Oct 13, 2016 at 14:52
• 1 CSS is shorter and faster, read about :hover selector. You can toggle a class on the node if you really must. – Azamantes Commented Oct 13, 2016 at 14:53
• 1 getElementByTagName doesn't exist. The function name has a s in the middle of it. – Quentin Commented Oct 13, 2016 at 14:57
• 1 You could use. var link = document.getElementsByTagName('a')[0]; But that will get all anchor tags. And onmouseover will change the color. But it won't change back. jsfiddle/Nt8Pq/43 So you will have to figure those parts out as well.. – khollenbeck Commented Oct 13, 2016 at 14:58

 |  Show 5 more ments

5 Answers 5

Sorted by: Reset to default 5

Your code looks for elements with ids and you have not ids. You would need to select them by the tag name and loop over the collection. And than you would need to find the anchor that is inside of the collection.

var menu = document.getElementById("menu");
var lis = menu.getElementsByTagName("li");

for (var i = 0; i < lis.length; i++) {
  var li = lis[i];
  li.addEventListener("mouseover", function() {
    this.getElementsByTagName("a")[0].style.color = "#8080ff";
  });
  li.addEventListener("mouseout", function() {
    this.getElementsByTagName("a")[0].style.color = "#000000";
  });
}

<ul id="menu">
  <li>
    <a href="#">test</a>
  </li>
  <li>
    <a href="#">test</a>
  </li>
  <li>
    <a href="#">test</a>
  </li>
</ul>

In the end this is a lot of code to implement

ul li:hover a {
    color : "#8080ff";
}

SO you could just inject a CSS rule if you are not able to actually add styles to the page...

var sheet = window.document.styleSheets[0];
sheet.insertRule('#menu li:hover a { color: #8080ff; }', sheet.cssRules.length);

<ul id="menu">
  <li>
    <a href="#">test</a>
  </li>
  <li>
    <a href="#">test</a>
  </li>
  <li>
    <a href="#">test</a>
  </li>
</ul>

This can be done with some simple HTML event attributes and JavaScript.

<li>
<a href="#" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">test</a>
</li>

HTML Event Attributes

If you want to do it with JS, here is the answer. But like said before, you shouldn't do it this way:

<li id="list">
<a id="link" href="#">test</a>
</li>

 var list = document.getElementById('list');
 var link = document.getElementById('link');

http://jsfiddle/Nt8Pq/45/

Assuming you can not modify the CSS or the source of the web page, and you are stuck only with a single javascript file in which you wish to modify some features of a web page, then this approach will work:

One caveat is you have to use of an index in document.getElementsByTagName('li') which returns an array. If you always need the first element for example, you can hard code this index as zero. Otherwise, you need to iterate over the collection looking for the one you wish to change.

Finally, you can modify the style of the firstChildElement after you find the list item you want.

var li = document.getElementsByTagName('li')[0];

li.onmouseover = function() {
  li.firstElementChild.style.color = "#F00"; // red
}

li.onmouseout = function() {
  li.firstElementChild.style.color = "#000"; // black
};

<li>
  <a href="#">Mouse over me.</a>
</li>

var nodesArray = document.getElementById('myID').getElementsByTagName('a');
for (var i = 0; i < nodesArray.length; i++) {
    nodesArray[i].style.color = 'red';
}

May be you will find your solution in this link:-https://ubuntuforums/showthread.php?t=1692280