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

variances in CSS performance between local and remote hosting

My team and I are all using Internet Explorer 8 on Windows 7 Professional, with Visual Studio 2010 Premium. However, we have noticed that when running our application in localhost mode versus remote mode (on the server), there are differences in the CSS re ...

c#.netasp.netcss

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

javascriptjquerycssajaxhtml

A Guide on Modifying a Pseudo Element When Clicked

How can I create a click handler in jQuery to change the color of an 'eyebrow' element above a Heading element? The eyebrow element is set up with a pseudo element in my project, and I'm struggling to make it change color when the heading is ...

jquerycsspseudo-element

Creating a user-friendly navigation menu: A step-by-step guide

I need help creating a navigation menu for my website that isn't functioning properly. Here is the code I am currently using: body{ margin: 0px; padding: 0px; } nav > ul{ margin: 0px; padding: 0px; } nav > ul > li{ fl ...

htmlcss

What could be causing my websocket server to not properly serve my HTML page?

I'm currently facing an issue with establishing a web socket connection using NodeJS in my app.js file. Despite declaring a listener on port 8080, the connection is not getting established and no logs are being generated in the console. My goal is to ...

node.jshtmlwebsocketserver

What is the best way to use regex to target only the content within a particular set of tags?

While there have been numerous similar inquiries posed before, mine pertains to a specific selection within the tags. I am not interested in extracting the entire content between <a href and </a>, but rather just targeting the "> within th ...

htmlregexbashsedpcre

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

javascriptjqueryhtmlcss

Adjusting the style attributes for Material-UI Icons

I could use some assistance with changing the CSS property of MUI icons in order to assign a specific color when the icon is focused. I have implemented the icons in the header and am displaying different pages below them, so I would like to give each ac ...

cssmaterial-ui

Guide on setting the BackColor of a table cell based on a database value dynamically

In the project I am currently working on, there is a request to change the background color of specific table cells based on their values. In order to achieve this, I am handling the RadGrid_ItemDataBound event and attempting to set the BackColor property ...

cssvb.netcellradgrid

How can Selenium in Python be used to click a JavaScript button?

I need help automating the click of a button on a webpage using selenium Here is the HTML for the button: <div class="wdpv_vote_up "> <input value="7787" type="hidden"> <input class="wdpv_blog_id" value="1" type="hidden"> </div& ...

javascriptjquerypythonhtmlselenium

Tips for creating responsive scrollable columns in an HTML table with Bootstrap

I'm not a professional web designer. I attempted to create a web layout with scrollable columns containing data in anchor tags that are loaded dynamically. To achieve this, I created an HTML table structure along with a stylesheet. Here is the source ...

htmlcssangularjstwitter-bootstrap

The svg image could not be loaded from an external URL due to a Content Security Policy directive violation stating: "default-src 'none'"

Currently, I am working on creating an SVG that includes an image from an external URL: https://i.stack.imgur.com/4iGwt.jpg: <svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns= ...

htmlimagesvgcontent-security-policy

Searching for text in an HTML table using PHP DOM query

How do I extract text from HTML table cells using PHP DOM query? Here is a sample HTML table: <table> <tr> <th>Job Location:</th> <td><a href="/#">Kabul</a> </td> </tr> <tr> ...

phphtmldomweb-scraping

Do you know where I can locate the HTML and CSS pertaining to the search results page

I'm looking for a way to present search results on my website that resembles the Google search results, creating a familiar interface for users. Is there anyone who knows where I can obtain the HTML and CSS code that produces the same style as Google& ...

htmlcssstyles

Verify for any alterations in the code by utilizing the inspect element feature

Currently dealing with a security concern regarding my older Java application. Is there a method available to detect any modifications made to my code (HTML or script) through Developer Tools on the user's end? This would allow me to prevent form subm ...

javascriptjqueryhtmlsecuritybrowser

Dynamic CSS containers that adjust according to browser and screen dimensions

01) In my attempt to create a row with two content boxes, I encountered an issue. The first box is supposed to display an image and the second box text. However, I am struggling to make it responsive and interactive based on different browser and screen si ...

htmlcsssizeinteractive

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...

jquerycsshtml

Shape with a dark border div

Having some trouble with creating this particular shape using CSS border classes. If anyone can assist in making this black box shape using Jquery, it would be greatly appreciated. Check out the image here. ...

javascriptjqueryhtmlcss

Difficulty positioning CSS, aligning flex-box grid with floating text

My attempt to include an aside section is causing alignment issues with the navigation menu and the aside itself. The problem seems to be related to using float:left for the 200x200 images. I want the layout to be well-positioned like the expected image. I ...

htmlcsspositionblock

Strategies for managing grid overflow situations

Check out my codepen showcasing the current issue I'm dealing with: https://codepen.io/marcdaframe/pen/qeBWNd <div> 123 abc <div class="container"> <div class="wrapper"> <div>One</div> <div>Two</div> ...

htmlcsscss-grid