Looking to modify an element based on the hover state of a pseudo-element. Here's what I've tried so far, but it isn't working as expected:
nav .logo {
display: none;
}
nav:before{}
nav:hover:before .logo {
display: block;
}
I want the div to be displayed when hovering over the before "element". Appreciate any assistance with this issue!
Unfortunately, it's not possible.
The issue lies in your attempt to target an element with the class .logo as a descendant of the nav element's :before pseudo element.
This approach won't work because .logo is not actually a descendant. Additionally, pseudo elements cannot contain child elements.
On the bright side, you do have the option to select sibling elements of the pseudo element. However, this would require a change in your HTML structure.
For example:
nav:hover:before + .logo {
display: block;
}
...although it seems like that may not align with your intended outcome.
Appreciate your assistance!
Instead of using a pseudo element, I decided to stick with a "real" HTML element. Here is the markup:
<nav class="header-nav">
<div class="menu-header-menue-container">
<ul id="menu-header-menue" class="menu">
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</div>
</nav>
Here is the corresponding (S)CSS:
div {
position: absolute;
top: -55px;
right: 0;
width: 30px;
height: 30px;
background: url(http://placehold.it/30x30);
ul {
display: none;
}
&:hover {
ul {
display: block;
}
}
}
I am working on a website and need to incorporate support for the Spanish language. I have prepared an XML file with both English and Spanish text. The XML file is being read based on the user's selection of language from a dropdown menu. Everything s ...
Can you explain why the icon is still visible when the display is set to none? .toc.item { display: none; } <a class="toc item"><i class="sidebar icon"></i></a> ...
While trying to set up my website template from , I noticed that the main div, which includes circles and a call to action at the bottom, keeps aligning with the top of the page and under the navigation bar. Any ideas on what could be causing this issue? ...
I am currently working on creating a horizontal list of items: https://i.sstatic.net/fu89D.png My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. https://i.ssta ...
Is there a way to populate a list (ul li) with data from an array that is populated through Entity Framework code? Currently, I am able to populate an option dropdown successfully using the following code: <select class="form-control" name="Search" ...
I'm unsure if anyone will notice if I make changes to my preceding post, so I am here now to create a new one. Below is the code snippet: $(document).ready(function(){ var a; var b; var c; var d; var pmmain = ["Citrix", "Coach", ...
I have a textarea in my html file and I am trying to prevent the text from overlapping with an emoji icon button. I would prefer not to use a z-index for the emoji as it may cause issues with other elements on the page. Below is the code snippet: HTML & ...
I attempted to implement the dropdown menu example from Bootstrap 4, but unfortunately it does not seem to be working as expected. The dropdown menu does not appear when clicked. <li class="nav-item dropdown"> <a class="nav-link dropdown-to ...
Is there a way to create a dynamic MenuBar by using an external JSON file? How can I write HTML code to fetch and display JSON data dynamically? What is the process for reading a JSON file? //JSON File = Menu.Json {"data": [{"id": "1", "text": "F ...
I'm currently working on an image slider that has some interactive features. Here's how it functions: When a user clicks on an image, it slides and comes to the front. On the next click, the image is flipped and enlarged. Then, on another click ...
I am looking to create multiple rows that are horizontally floated, as shown in the image. However, I am facing an issue with setting the width of the container because I do not know the exact number of rows that will be added. Currently, my code looks li ...
My goal is to display an image when the checkbox is checked and show text when it is unchecked. However, I am facing an issue where the text does not appear when I uncheck the checkbox. <input type="checkbox" id="checkword" onchang ...
Can you apply a gradient color to CSS ::selection? I tried using the following code: ::selection { background-image: -webkit-linear-gradient(left, #ee4037 0%, #eb297b 100%); } However, it did not have the desired effect. ...
Hey, I have created a PHP page that dynamically reads images from a folder and displays them on a gallery page. However, I am facing some issues - I am unable to link an external CSS file and I have to include all the CSS within the HTML. Additionally, I c ...
Is there a way to remove the unsightly white outline around the UI Dialog? Check out this picture of the dialog I've tried various solutions I found on Google and Stack Overflow, such as: .ui-widget-content { border: none !important; outlin ...
UPDATE: Problem solved! I discovered that the 'overflow:hidden' inside the #main for the media query was causing the navigation to disappear. I have a scroll navigation positioned at the top of my webpage. However, as I scroll down, the navigati ...
I'm experiencing some alignment issues with the images in my slideshow. I used this example as a reference to create my slide: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots When clicking on the next image, it seems to mo ...
Using a dropdown menu, I want to display options for candidates that can be chosen. Additionally, I would like an input field to filter these options; so that when text is entered, the dropdown menu adjusts accordingly. Specifically, I am looking to set th ...
Can someone please help me create a hover effect for areas in maps? Below is the code for the map. Thank you in advance! Here is the image. <img src="[CR_kraje_1_úroveň_v1] (imported)" width="770" height="443" border="0" usemap="#map" /> &l ...
Is there a way to create gaps between rows and columns in bootstrap without disrupting the layout? I am trying to have three columns on each row by using col-4, but when I try to add margin or padding, it messes up the design. My goal is to achieve a layo ...