Conceal your password using HTML techniques

My goal is to hide passwords from being visible unless a user hovers directly over them. I've tried using the code below, but the hover effect isn't working as expected - either the password disappears completely or remains visible at all times.

<style>
#pass.a{
    visibility:hidden;
}
#pass.a:hover{
    visibility:visible;
}
</style>

<table>
<tr>
    <td id="pass"><a> Password </a></td>
</tr>
</table>

I'm struggling to understand why this doesn't work properly. Any help would be appreciated!

htmlcsshovervisibility

Answer №1

It has been brought to light that there is a bug in your code:

#pass a{
    visibility:hidden;
}
#pass a:hover{
    visibility:visible;
}

Moreover, there is another error present. When the element disappears, the hover event will not be triggered. To address this, you should use the sibling selector:

#pass:hover > a

Check out the demo here

Answer №2

#pass.a{ is searching for an element with id="pass" class="a"

What you need is

#pass a { and #pass a:hover { to target the a that is a descendant of the element with id="pass"

Answer №3

#secret.b signifies element with id=secret and class=b. I believe this may not be the solution you're seeking.

Switch out the dot for a space:

#secret b
{
    display:none;
}

#secret b:hover
{
    display:block;
}

Answer №4

When utilizing the . selector, it typically signifies a class selector. However, in this scenario, you should be targeting the element using the tag selector #pass a.

Consider implementing the following: 

#pass a{
    visibility:hidden;
}

#pass a:hover{
   visibility:visible;
}

Answer №5

The following code functions correctly.

apply a{display:none;}

apply:hover>a{display:block;}

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

script code to limit selection of dates within a predefined range

I'm seeking assistance to limit my customers from selecting a date beyond 10 days in advance. Although I previously had a code that functioned properly when there were more than 10 days left in the current month, it is now ineffective. This is becaus ...

htmltypescriptgoogle-apps-scriptdatepicker

showcasing recommended options in the search bar through the use of javaScript

Hey there, I've been working on creating result suggestions for my search bar. The generation process is all set, but I'm facing an issue with displaying the elements on the HTML page. During testing, I keep seeing ${resultItem.name}, and when I ...

javascripthtmlcss

Determine the specific cell involved in an HTML5 drag-and-drop interaction within a table

I've been experimenting with the HTML5 drag and drop functionality in an Angular project. Here's the setup I'm working with: A container containing draggable 'objects' A table where users can drop the dragged elements Following ...

javascriptangularhtmlhtml5-draggable

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

javascripthtmlqunit

The Bootstrap navigation bar isn't displaying properly on mobile devices

Help! My Bootstrap navbar is not working properly on mobile view. The menu icon shows up but when clicked, no items are displayed. Here is the HTML code for my navbar: <header class="header_area"> <div class="main-menu"> ...

htmlcssbootstrap-4

How to retrieve and delete a row based on the search criteria in an HTML table using jQuery

Here is the HTML code snippet: <table class="table" id="myTable"> <tr> <th>Type</th> <th>Counter</th> <th>Remove</th> <th style="display:none;">TypeDistribution</t ...

javascriptjqueryhtmlsearchhtml-table

The drop-down menu fails to appear when I move my cursor over it

#menu { overflow: hidden; background: #202020; } #menu ul { margin: 0px 0px 0px 0px; padding: 0px 0px; list-style: none; line-height: normal; text-align: center; } #menu li { display: inline-block; } #menu a { display: block; position: relative; padding ...

javascripthtmlcssreactjs

Adjust Bootstrap form positioning to be fixed at the bottom of the page

Can anyone provide assistance with positioning this form at the bottom of the page? <form> <div class="form-group"> <input type="email" class="form-control" id="" aria-describedby="emailHelp" placeholder="Enter email"> &l ...

htmlcssbootstrap-4

Is there a way to verify the file extension in a multi-input form during an upload process?

I am looking for a solution that requests users to upload 4 different files when filling out the form. Check out this example of one of the inputs: <div class="custom-file"> <input type="file" class="custom-file-input" accept="video/*" id="v ...

javascripthtml

What can be done to avoid a form being reset when it returns no results?

I've recently created a mysql and php search page, which is working well. However, I noticed that when the form is submitted and there are no results returned, the <option> tags get reset. Is there a way to prevent this from happening? META: I ...

phphtmlmysqlselecthtml-select

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcss

JavaScript alert box

I'm fairly new to the world of web development, with knowledge in CSS & HTML and currently learning TypeScript. I'm attempting to create a message icon that opens and closes a notifications bar. Here's where I'm at so far: document.getE ...

javascripthtmlcsstypescriptpopup

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

javascripthtmlangulartypescript

what is the best way to display camera view in full screen on an iOS application?

What method should I use on an iPhone to launch the camera in full screen mode? Additionally, how can I overlay a compass on top of the camera view on iOS? ...

htmlobjective-c

Encountering issues with CSS Modules in Next.JS app while using app/about/layout.tsx

Currently, I am delving into the world of Next.js and encountering some challenges with locally scoped CSS modules. In my project, I have an about directory which contains a layout component. Strangely, the styles applied to the layout component are not b ...

javascripthtmlcsswebnext.js

Choose or deselect images from a selection

I am currently working on a feature for an album creation tool where users can select photos from a pool of images and assign them to a specific folder. However, I'm facing difficulty in selecting individual photos and applying customized attributes t ...

javascripthtmljquerycss

What is the best way to display an image right in the middle of the header?

My project consists of three main files - an HTML, a CSS, and a JS file. I have developed the HTML using the Bootstrap 5.1.3 framework. The issue I am facing pertains to the alignment of the clothing brand logo within the header section. Despite multiple ...

javascripthtmlcssbootstrap-5

Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...

javascriptjqueryhtmlcss

The accordion won't function properly if it is added using append() after the document is ready

I have implemented a button to add an accordion, but unfortunately it doesn't seem to be working properly. I am unsure of how to troubleshoot and resolve this issue. If the accordion HTML is appended after the document.ready() function, then the accor ...

jqueryhtmlcss

Showing the precise age in years by utilizing the provided 'Date of Birth' selected from the datePicker

Is it possible to retrieve the date entered in the datePicker and use it to populate the current age field in a PHP file using either PHP or Javascript? if ($key == 'currentage') { $group[] = $this->form->createEleme ...

javascriptphphtml