Struggling to activate the hide/show feature on mouseover

After exploring different methods and seeking guidance on this platform, I am still unable to achieve the desired outcome. My goal is to have the content in the "topb" section appear when hovering over a link with the class of "top" and disappear when the mouse moves away. Unfortunately, I am struggling to even make the div show up upon mouseover. Any advice or suggestions would be greatly appreciated. Thank you.

var num1 = document.getElementByClassName("top");
num1.onmouseover(function() {
var changeIt = getElementByClassName("topb");
if (changeIt.style.visibility === "hidden") {
changeIt.style.visibility = "visible";
}else {
changeIt.style.visibility = "hidden";
});
.topb {
    position:absolute;
    top:140px;
    left:420px;
    color:black;
    border:2px solid black;
    padding-left:10px;
    padding-right:10px;
    visibility:hidden;
}
<ul class = "sidebar">
<li> <a class="top" href= "filename.html"> A </a>`enter code </li> 
<li> <a class="second" href= "filename.html"> B </a> </li>
<li> <a class="third" href= "filename.html"> C </a></li>
<li> <a class="fourth" href= "filename.html"> D </a></li>
<li> <a class="bottom" href= "filename.html"> E </a></li>
</ul> 

<div class="topb">
<p> sample of application here </p>
</div>

javascripthtmlcss

Answer №1

Create a unique CSS-only solution for this task without relying on JavaScript. Utilize the

:hover

selector along with

::after

and add

visibility:hidden;

Check out the documentation link

To demonstrate, here's an example:

.topb {
    position:absolute;
    top:140px;
    left:420px;
    color:black;
    border:2px solid black;
    padding-left:10px;
    padding-right:10px;
}

.topb:hover::after {
  visibility:hidden;
}

This technique is employed on my website www.mr-programs.com for the start button, which triggers animations on hover.

Answer №2

num1.onmouseover = function() {.....} 

var num1 = document.getElementByClassName("top");
num1.onmouseover = function() {
var changeIt = getElementByClassName("topb");
if (changeIt.style.visibility === "hidden") {
changeIt.style.visibility = "visible";
}else {
changeIt.style.visibility = "hidden";
};

or

num1.addEventListener("mouseover", function(){ ... });

var num1 = document.getElementByClassName("top");    
num1.addEventListener("mouseover", function(){
    var changeIt = getElementByClassName("topb");
    if (changeIt.style.visibility === "hidden") {
    changeIt.style.visibility = "visible";
    }else {
    changeIt.style.visibility = "hidden";
});

Answer №3

1st:

There is no API equivalent to document.getElementByClassName, you may want to consider using document.getElementsByClassName instead.

2nd:

Even if the API is correct, one thing to be mindful of is that it 

Returns an array-like object of all child elements which have all of the given class names.

3nd:

If your code is running in a modern browser, I recommend using the document.querySelector API as it is very simple. However, if it is running in an older browser, you may want to consider using jQuery.

  1. Modern browser:

    var num1 = document.querySelector(".top"); // `dot means it is a className

  2. Pure JavaScript:

    var num1 = document.getElementsByClassName(".top")[0]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The onChange event of the dropdownlist in MVC is not functioning correctly and is not properly triggering the action

Hey everyone, I'm trying to achieve a functionality where changing the selection of a dropdown list will trigger an AJAX call to a specific action with some data being passed. Below is the code I have implemented for this purpose. Despite verifying th ...

javascriptjqueryajaxasp.net-mvc-4onchange

Choosing the parent folder that is at least two levels above in JavaScript

My directory structure is: /project Login |1.1 js |1.2 db Main Within the 'db' folder, there is a script that utilizes AJAX to determine if a user is an admin or regular user. The goal is to redirect to a page stored in the 'Main&apo ...

javascriptphpjquery

Achieving Equal Heights for Nested DIVs within Containers

Below is the snippet of code I need help with: <table cellpadding="0" cellspacing="0" style="background-color:Aqua"> <tr> <td> <div style="background-color:Yellow">Navigation</div> </td> ...

javascripthtmlcss

Personalized navigation bar using the Bootstrap 5 framework

I am seeking to create a unique custom navbar layout with specific requirements: A centered logo 3 collapsible menu buttons on the left 2 icons (account and Instagram) on the right, always visible When the left menu is collapsed, I want to display a hamb ...

htmlcsstwitter-bootstrapbootstrap-5navbar

Google-play-scraper encounters an unhandled promise rejection

I'm trying to use the google-play-scraper library with Node.js, but I keep encountering an error when passing a variable as the 'appId'. How can I resolve this issue? Example that works: var gplay = require('google-play-scraper') ...

javascriptnode.js

Flexbox keeps elements on the same line without breaking

I'm currently delving into flexbox and aiming to create a layout similar to the one shown below: https://i.sstatic.net/epnkU.png Here is the code I have come up with: .container { display: flex; gap: 26px; } .flex50 { flex: 50%; ...

htmlcssflexbox

Encountering HTML content error when attempting to log in with REST API through Express on Postman

I'm currently in the process of developing a basic login API using Node.js and Express. However, I've encountered an error when testing with Postman: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

javascriptnode.jsexpress

Switch out the HTML content within the JavaScript include

Here is the situation: <script type="text/javascript" src="http://xy.com/something.js"></script> This code snippet in my PHP/HTML file loads the entire something.js file. Inside that file, there are lines containing "document.write..." which ...

phpjavascripthtml

Error: The DOM is throwing an uncaught TypeError because it cannot read the property 'children' of an undefined value

After delving into the depths of the DOM, I zeroed in on a specific element that I was eager to access. To reach this elusive element, I meticulously navigated through the DOM using the following code snippet: var body = document.body; var bodych ...

javascript

What is the best way to store and retrieve data from the current webpage using HTML, CSS, and JavaScript?

Is there a way to persistently save the button created by the user even when the browser is refreshed? Here is an example code snippet: function create(){ const a = document.createElement("button") document.body.appendChild(a) const b = documen ...

javascripthtml

How can I insert PHP code within the style attribute of a div tag?

I tried implementing this code, but unfortunately it's not functioning properly. My goal is to take user-defined width and height inputs in PHP and use them to generate a shape. echo "<div style='width:<?php $sirina?>;height: <?php $v ...

phphtml

Mastering the art of customizing jQuery Mobile skins

Just landed a front end developer role at a prominent bank where I'll be focusing on the UI using jQuery Mobile. I'm looking for a comprehensive page that contains all the assets of jQuery Mobile to streamline the skinning process. Any leads? ...

jqueryhtmlcssmobile

Encountering difficulties with "removeChild" in React when attempting to dynamically update an array

In my React component's state, I have an array called "personArray." The component includes a search bar that triggers an API request and updates the "personArray" based on user input. In the render method, I map through this "personArray" to display ...

javascriptreactjsreact-redux

Is it possible to incorporate additional sections by utilizing map and props in the given code snippet?

I have a component named CardItems.jsx which specifically defines the appearance of a card. Then, I also have Gotocart.jsx where there is a welcome section (similar to welcoming someone to their cart) and an order section at the end (for initiating an orde ...

javascriptreactjsmapsreact-props

CSS page header not appearing on all pages when printing from TryitEditor in Safari on iOS

Experimenting in W3's TryitEditor, I am currently using the following CSS: p.hr { position: running(header) } @media print { .pagebreak { page-break-before: always; } @page { @top-center { content: element(header); } } } Ther ...

htmlcssiossafari

What is the best way to retrieve a style property from a <style> tag using JavaScript?

Is there a way to retrieve CSS properties set in the <style> tag in JavaScript, rather than just those set in the element's style attribute? For example: <style> div{background:red;} </style> How can I access these styles, such ...

javascripthtmlcss

Guidelines for attaining seamless motion animation utilizing devicemotion rotationRate information

I am utilizing the rotationRate data obtained from the devicemotion eventListener to manipulate a three.js scene by tilting. The scene does respond to the data accurately in terms of angle adjustments, but it produces an unsmooth motion effect. Is there a ...

javascriptthree.js

Integrate a button following the first paragraph exclusively when there are two or more paragraphs present

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> jQuery(document).ready(function($) { if ( $('p').length < 1 ) { $('p:last-child').after('<div id="toggle" class="btn"> ...

javascriptjqueryhtml

Changing the time zone of a browser using JavaScript or jQuery

After researching numerous discussions on the topic, it appears that changing the browser's timezone programmatically is not possible. Although the moment-timezone.js library allows us to set timezone for its objects, it does not affect the browser&ap ...

javascriptjqueryangularjstimezonemomentjs

The passport.use method is failing to invoke in Node.js when utilizing the passport-local strategy

Upon calling the login and submitting the form, it seems that the use.authenticate() method is not being executed and no error messages are displayed. Server.js code snippet: const passport=require('passport'); const Strategy=require('pass ...

javascriptnode.jsexpressnpmpassport.js