Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

Question

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

I am new to JavaScript and struggling to find a solution.

Despite searching online for fixes, none of the solutions I've found seem to work for me. I have spent hours troubleshooting the issue but I must be missing something crucial. Can someone please help?

CSS: I have created a basic two-column div (out of 12 columns) with a CSS transition that increases its width from 2% to 15% on hover.

HTML: Inside the div, I have added some test links which are currently hidden using a CSS class.

JS: My goal is to use JavaScript to make these links visible when the mouse hovers over the div.

HTML:

<div id="linkpopout" class="col-2 popout">
  <a href="www.bing.com" class="menulinks">Bing</a>
  <a href="www.yahoo.com" class="menulinks">Yahoo</a>
  <a href="www.google.com" class="menulinks">Google</a>      
</div>

CSS:

.col-2 {width: 16.66%;}

.popout {
  background:lightblue;
  transition:width 0.5s, height 0.5s;
  transition-timing-function:ease-out;
  width:2%;
  height:300px;
  float:left;
}

.popout:hover {
  width:15%;
  height:300px;
}

.menulinks {
  visibility:hidden;
}

JS:

var linkpop = document.getElementById("linkpopout");
var popoutlinks = document.getElementsByClassName("menulinks");
linkpop.addEventListener("mouseover", makeVisible);
function makeVisible() {
  popoutlinks.style.visibility="visible";
}

In addition to trying

document.getElementsByClassName(menulinks").style.visibility="visible";

I also attempted to use opacity instead of visibility, but it had no effect.

Thank you.

javascript html css addeventlistener getelementsbyclassname

Answer 1

Answer №1

Avoid the use of JavaScript.

.col-2 {width: 16.66%;}

.popout {
  background:lightblue;
  transition:width 0.5s, height 0.5s;
  transition-timing-function:ease-out;
  width:2%;
  height:300px;
  float:left;
}

.popout:hover {
  width:15%;
  height:300px;
}

.menulinks {
  visibility:hidden;
}

.popout:hover .menulinks {
  visibility: visible;
}

<div id="linkpopout" class="col-2 popout">
  <a href="www.bing.com" class="menulinks">Bing</a>
  <a href="www.yahoo.com" class="menulinks">Yahoo</a>
  <a href="www.google.com" class="menulinks">Google</a>      
</div>

Answer 2

Avoid the use of JavaScript.

.col-2 {width: 16.66%;}

.popout {
  background:lightblue;
  transition:width 0.5s, height 0.5s;
  transition-timing-function:ease-out;
  width:2%;
  height:300px;
  float:left;
}

.popout:hover {
  width:15%;
  height:300px;
}

.menulinks {
  visibility:hidden;
}

.popout:hover .menulinks {
  visibility: visible;
}

<div id="linkpopout" class="col-2 popout">
  <a href="www.bing.com" class="menulinks">Bing</a>
  <a href="www.yahoo.com" class="menulinks">Yahoo</a>
  <a href="www.google.com" class="menulinks">Google</a>      
</div>

Answer 3

Answer №2

If you'd like to change the visibility of links based on whether the menu is displayed or not, here's how you can achieve that:

JavaScript:

<script>
var linkpop = document.getElementById("linkpopout");
var popoutlinks = document.getElementsByClassName("menulinks");
linkpop.addEventListener("mouseover", makeVisible);
linkpop.addEventListener("mouseout", makeVisible);

function makeVisible() {
  for (let i = 0; i < popoutlinks.length; i++) {
    popoutlinks[i].classList.toggle("vis");
  }
}
</script>

The 'toggle' method in 'classList' linked to an element will either add or remove the specified class from the element based on its current state. If the class exists, it will be removed; otherwise, it will be added. This method is particularly useful for menus that pop out like this one. The script loops through all elements, such as your menulinks, and toggles the class individually.

Create a class to toggle on and off with the default state corresponding to the class you desire for the element.

CSS:

.menulinks { visibility:hidden; }
.vis { visibility:visible }

Answer 4

If you'd like to change the visibility of links based on whether the menu is displayed or not, here's how you can achieve that:

JavaScript:

<script>
var linkpop = document.getElementById("linkpopout");
var popoutlinks = document.getElementsByClassName("menulinks");
linkpop.addEventListener("mouseover", makeVisible);
linkpop.addEventListener("mouseout", makeVisible);

function makeVisible() {
  for (let i = 0; i < popoutlinks.length; i++) {
    popoutlinks[i].classList.toggle("vis");
  }
}
</script>

The 'toggle' method in 'classList' linked to an element will either add or remove the specified class from the element based on its current state. If the class exists, it will be removed; otherwise, it will be added. This method is particularly useful for menus that pop out like this one. The script loops through all elements, such as your menulinks, and toggles the class individually.

Create a class to toggle on and off with the default state corresponding to the class you desire for the element.

CSS:

.menulinks { visibility:hidden; }
.vis { visibility:visible }

Answer 5

Answer №3

To iterate through the elements in the DOM:

getElementsByClassName

This method retrieves an array-like object containing all child elements with specified class names. When used on the document object, it searches the entire document, including the root node. It can also be called on any element to fetch only elements that are descendants of the specified root element and have the given class names.

function makeVisible() {
  popoutlinks.forEach(function(e) {
      e.style.visibility="visible";
  });   
}

Answer 6

To iterate through the elements in the DOM:

getElementsByClassName

This method retrieves an array-like object containing all child elements with specified class names. When used on the document object, it searches the entire document, including the root node. It can also be called on any element to fetch only elements that are descendants of the specified root element and have the given class names.

function makeVisible() {
  popoutlinks.forEach(function(e) {
      e.style.visibility="visible";
  });   
}

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

Answer №1

Answer №2

Answer №3

Similar questions

Get Onsen UI 2 up and running without the need for Angular

Issues with special characters in @font-face rules

How to Override Certificate Expiry in JavaScript

What could be the reason for getElementsByClassName failing to work on dynamic HTML elements?

What causes the discrepancy in results between the quoted printable encoding operation in JavaScript and Oracle?

Encountering a CouchDB 401 Unauthorized Error

onmouseleave event stops triggering after blur event

Difficulty comprehending the fallback for JSON.parse in jQuery.parseJSON

What is the best way to vertically align Bootstrap Columns to ensure they have consistent heights?

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

Position an element to the right within a div using the float property

Code snippet for converting the current webpage into a PDF using Jquery

Dynamic Element with Mousewheel Event

ngSwitchCase provider not found

tips for remaining in modal window post form submission

Set the height of the last child element to 100% in the CSS

Construct a string by combining the elements of a multi-dimensional array of children, organized into grouped

How can I display the output from Geocoder in a text box using the ArcGIS JavaScript API?

Issue encountered while loading JSON data into DynamoDB's local instance

The error message states: "Cannot create element as the React object is not