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

Find the height of the viewport using jQuery, subtracting (n) pixels

What is the best way to retrieve the nearest form data with jQuery after a child input has been modified?

Failure in Retrieving Fresh Information via Ajax Call

Warning: Unhandled promise rejection - The type error occurred because the property 'close' of the object is undefined

Difficulty paginating jqgrid when using an array as the data source

Converting a Base64 URL to an image object: A step-by-step guide

Tips for deleting a CSS class from a Wicket element

The NodeJS req.query is providing inaccurate information

Unable to access an element using jquery

What is causing this code to run immediately upon the addition of Promise logic?

Steps for incorporating events on Jquery UI button

How can I leverage Express, AngularJS, and Socket.io to facilitate broadcasting and receiving notifications?

JQuery Templates - when recursion becomes overwhelming

CSS media query that prioritizes styling for large screens over small screens

What is the best way to showcase the chosen items from a treeview in ReactJS?

Limiting the DatePicker in React JS to only display the current year: Tips and Tricks!

Automatically trigger the Submit button click with this selector

Compiling modal window content in AngularJS can lead to the creation of controllers that are left disconnected

Having trouble configuring and executing Vue.js within Laravel

The issue of JQuery Mobile not recognizing HREF links when combined with Javascript