HTML Code
<p>I am a duck</p>
CSS Code
p:hover {
display:none;
}
Why is the text not disappearing when hovered over?
<p>I am a duck</p>
p:hover {
display:none;
}
Why is the text not disappearing when hovered over?
Yes, it does vanish.
But once it vanishes, the hover effect is removed, prompting it to reappear.
With each movement of the mouse, this pattern continues; if you hover over it, you'll notice it flickering.
The specific performance varies according to the browser; Chrome, for instance, only updates hover status during mouse interactions.
This explanation should clarify things for you.
Here is an example in HTML:
<div class="container"><p>bar</p></div>
And here is the corresponding CSS:
.container{width:50%;height:50px;}
.container p{font-size:16px;}
.container:hover p{color:red;}
I hope this provides some clarity.
An easy solution could be to use the following code snippet:
p:hover {
opacity: 0;
}
Keep in mind that this will only change the opacity of the element while it is being hovered over. It will not hide the element once the hover action has ended.
By using the CSS property display: none, you are essentially taking the element out of visibility completely, including its height and width. This means that when you hover over it, it disappears entirely, causing the hover effect to be lost, and then it reappears. It creates an intriguing cycle.
If you want to maintain a hoverable object at all times, consider looking into using the CSS property visibility instead, or placing the element within a container that remains visible so the hover effect is always present.
While the element will technically still be functioning, it's important to keep in mind that once it is set to display: none, it becomes inaccessible for hovering because there is nothing to display. As a result, it appears as if the element is constantly toggling between being hovered and un-hovered at a rapid pace, giving the illusion that nothing is happening.
display:none;
When the element is hidden using display:none, it will reappear when it is no longer being hovered over.
visibility:hidden;
Setting the element to be invisible with visibility:hidden will also make it reappear when it is no longer being hovered over, similar to display:none.
Alternatively, you can achieve the desired effect by setting the opacity to 0 on hover.
opacity:0;
With opacity set to 0, the element will stay hidden even when being hovered over because opacity does not affect event listening.
For a comparison of all three methods, check out this fiddle:
If you want to achieve this task, utilize JavaScript
$('p').hover(function(){
$(this).hide();
});
Check out this example on JSFiddle for additional details.
I have been utilizing the MUI-Collapse component to display collapsible content within a list. I am looking to add vertical spacing between the Collapse components in the list, but I do not want the spacing to remain when the Collapse is collapsed. I am ha ...
I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.). Here is my HTML: <h2><a id="hover-1" href="">Hov ...
I have been using the strip_tags() function in PHP to get rid of HTML tags from my text area input and to eliminate < script > tags for security reasons. However, I have run into an issue where the function ends up removing benign XML tags that are ...
Currently, I am utilizing jsp along with css to style the <td> within the <table> tag. My desired code format is shown below: https://i.sstatic.net/WJjA8.png However, what I am currently receiving is: https://i.sstatic.net/bLyvd.png #beng ...
Running into an issue with Bootstrap 4 - whenever I try to upload a file with a long name, it ends up overflowing beyond the input field. ...
When a user opens the timepicker, both hours and minutes will be blank. When they choose the hours, the minutes should automatically be set to 00. Thank you for your help. <b-form-timepicker v-model="meditation.start.time" ...
To summarize, I created a container div (parent) with a relative position and then added 3 children divs with absolute positions. Now, I am attempting to add another div that should appear below all of this content, essentially representing the next sectio ...
I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...
I have been working on integrating a star-rating widget that requires the use of a sprite file. The sprite file I am using looks like this: https://i.stack.imgur.com/ZSMMj.png This is how my HTML is structured: HTML <span id="star-ratings" class="c ...
Currently, I'm attempting to construct some HTML markup within a Spring controller. Here is a snippet of the code: append(sb ,"<div class="myDiv">"); This code snippet ends up generating the following HTML source in the brows ...
Retrieving a string from the database and using the explode function to split the values. Below is the code snippet: $data = DoctorRegistration::select('products') ->where('doctorid','=',$doctorid) ->get(); ...
I am working on a project where I have a button that triggers a modal: <button type="button" class="btn btn-primary add-subscription" data-toggle="modal" data-workspace_id="{{ workspace.id }}" data-target="# ...
UPDATE: I was able to answer my own question. JSoup can indeed find all image tags. I've been attempting to scrape content from but encountered a problem. In the website's source code, the main images are displayed in red font, which seems to ...
https://i.sstatic.net/E3ZFb.png My goal is to create a pixel-perfect star using CSS. I have attempted to achieve this so far, but the star currently has 5 points and I would like it to only have 4 points. Additionally, I am looking for a way to make the c ...
I'm currently working on creating a function that will generate an HTML table from an array of objects. The array provided below is what I need to convert into a table. let units = [ { 'code': 'COMP2110', &apos ...
Is there a way to make my slogan float above an image on a wide screen? I've tried adjusting the z-index without success. You can find the site here: Here is the CSS code: The #Slogan contains the words: Fitness Bike Guides - Top Models - Discount ...
I have been trying different methods, but none of them seem to work properly. My issue is with printing a html report with a header and footer on every page specifically in Firefox. A Possible Solution: <html> <head> <title></title&g ...
I'm trying to modify a div ID by appending either a 'W' or 'H' depending on whether the screen width is greater than the height. I figured I could achieve this using JavaScript since PHP lacks the ability to detect screen sizes. A ...
The issue I'm encountering in IE7 is related to the CSS properties position:relative;, float: right;, and float: left;. While this problem doesn't seem to occur in newer browsers, it's puzzling why position:relative; impacts the behavior of ...
Having an issue with my Bootstrap 4 carousel where I need to move 4 slides at a time. I have tried using the code below: $(this).carousel(4); However, the problem is that the carousel only jumps to that index without showing any transitions. Using $(this) ...