I am working with a parent div in my code that has 2 child divs. I am hoping to find a way to hide the second child when hovering over the first child, using only CSS or JavaScript.
<div class="parrent">
<div id="child1">
Hide child2
</div>
<div id="child2">
I must hide
</div>
</div>
Appreciate any assistance with this issue!
Consider using this code snippet:
#child1:hover ~ #child2 {
visibility:hidden;
}
This code utilizes the General sibling combinator ~ to select elements.
The ~ selector, known as the general sibling combinator, selects an element that follows another specific element in the HTML structure.
If needed, you can also leverage the Adjacent sibling combinator + based on your coding requirements.
The + selector, called the adjacent sibling combinator, targets an element that directly follows a specific element.
#child1:hover + #child2 {
visibility:hidden;
}
#child1:hover #child2 {
visibility:hidden;
}
Unfortunately, this approach won't work because it requires #child2 to be a direct child of #child1.
Instead, you can try the following solution:
$(document).ready(function(){
$('#child1').hover(function(){
$('#child2').hide();
}, function(){
$('#child2').show();
});
});
Alternatively, you can utilize the CSS code:
#child1:hover ~ #child2 {
visibility:hidden;
}
Here is a solution using jQuery:
$(document).ready(function(){
$('#child1').on('mouseover',function(){
$("#child2").hide();
}).on('mouseout',function(){
$("#child2").show();
});
});
If you want to target a sibling element of an element in CSS, it’s important to understand the proper syntax.
Rather than using the following syntax-
#child1:hover #child2
You should use:
#child1:hover+#child2
Check out this demo on JSFiddle
Please note that + is specifically used for referencing a sibling element.
I have recently implemented a syncfusion calendar for managing appointments in my ReactJs project, following the code examples from this link . After editing the JS and CSS codes (available at ), I encountered an issue with the CSS not displaying correctl ...
I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...
I have some test code related to WordPress displayed below. jQuery(document).ready(function($) { var link = 'http://000.00.00.00/cgi-bin/test.cgi'; $("#sub").click(function() { $.ajax({ type:'POST', url: link, ...
Suppose there exists a module on npm known as "awesomepackage". I am able to declare it as a dependency for my application using package.json by executing: npm i --save awesomepackage Upon examining my node_modules directory, I come across a folder label ...
As I embark on creating my first website, I have a specific vision in mind. I want the full display on a computer screen to show all the information and links without any need for scrolling. However, when the window is resized to smaller screens, I would l ...
In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...
Given two date pairs represented as numbers [hour, weekday], where hour ranges from 0-23 and weekday ranges from 1-7. I am tasked with generating all the hours in between each pair. For example, if given [13, 2] and [2, 3], the output would be: [13,2] [14 ...
I am facing an issue with my AJAX call in communication with my Rails controller. Even though the AJAX call itself seems fine, the callback function does not contain any data. Here is the AJAX request I'm making: $.ajax({ url: '/get_progres ...
I'm attempting to define the y-axis range of the chart to be between 1 and 100. After reviewing the API documentation, I came across a potential solution involving axis.tickValues which can be found here: https://github.com/mbostock/d3/wiki/SVG-Axes# ...
I am interested in creating a drop-down menu using jquery (here's the corresponding jsFiddle). HTML: <ul id="mainmenu"> <li><a href="http://myszki/">Aktualności</a></li> <li class="parent item13"><a href=" ...
Is there a way to center the form inside a card with 3 columns on each side, so that the form appears in the middle occupying about 6 columns without relying on Bootstrap, Materialize or any similar framework? Thanks! <div class="card"> & ...
As a beginner in the world of Three.js and WebGL, my first project involves creating a model of an animal and animating it in different ways, such as having its head follow the mouse cursor. The model consists of various geometries that are combined in sep ...
Google's search bar has always been a favorite of mine, with its rounded corners and generous text padding. https://i.stack.imgur.com/UbKrr.png I'm attempting to replicate this aesthetic using Material UI's <Autocomplete/> component ...
Is there a way to configure Sublime Text 2 where inputting a . (dot) automatically generates class=" " and adding a # (hash) creates id=" " while typing an HTML opening tag? ...
I have recently started using Bootstrap for a project and I want to ensure that my application is responsive on various device screens including normal laptops, iPad Mini (768 X 1024), and iPad Air (820 X 1180). Below is a snippet of my HTML code: <div ...
When working with Next.js, it is common practice to create a separate file for each new API endpoint. For example, for the /user endpoint, there would be a user.js file with its own handler, and another one for /user/goldmember. Some may argue that this ...
Hey there, I've encountered an issue while trying to fetch data from a URL and populate it into an array. The process involves pushing the fetched data into the "data" property of each element in the array, and then repeating this process recursively. ...
I created an angular filter called 'strLimit' to restrict the number of characters in a string: mod.filter('strLimit', ['$filter', function ($filter) { return function (input, limit) { if (!input) return; if (input.le ...
As a newcomer to React JS and Material UI, I am experimenting with creating various styles of buttons. Each button should have a unique appearance based on attributes like name= submit, ok, cancel, confirm, alert. App.JS import CssButton from './con ...
I've recently developed a web application using asp.net and I'm facing an issue while trying to style the radio buttons using CSS like the example below: https://i.sstatic.net/k7qGB.jpg However, after applying this design, the radio buttons are ...