Hovering over 'View Rows' should open up both New Records and Old Records
<div>
<li>Add Rows</li>
<li>DeleteRows</li>
<li>View Rows
<ul>
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</div>To achieve this effect using pure CSS, you can utilize the :hover pseudo-class. When hovering over the "View Rows" element, you can change the display property of the ".records" class to block.
.records {
display: none;
}
.view:hover .records {
display: block;
}<div>
<li>Add Rows</li>
<li>DeleteRows</li>
<li class="view">View Rows
<ul class="records">
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</div>If you prefer using JavaScript for interactivity, there is an example below that demonstrates how to achieve the same hover effect using event listeners and DOM manipulation techniques. This method provides more flexibility for customization compared to the CSS-only approach.
var records = document.querySelectorAll(".records");
var view = document.querySelectorAll(".view")[0];
view.addEventListener("mouseover", function() {
records.forEach(e => {
e.style.display = "block";
});
});
view.addEventListener("mouseleave", function() {
records.forEach(e => {
e.style.display = "none";
});
});.records {
display: none;
}<div>
<li>Add Rows</li>
<li>DeleteRows</li>
<li class="view">View Rows
<ul class="records">
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</div>For those who prefer working with jQuery, an alternative method is presented below. By using the .hover() function, you can easily show and hide the list items within the "View Rows" section when hovering over it.
$(".records").hide();
$(".view").hover(function() {
$(".records").show();
});
$(".view").mouseout(function() {
$(".records").hide();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<li>Add Rows</li>
<li>DeleteRows</li>
<li class="view">View Rows
<ul class="records">
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</div>To show a sub-list on hover of the parent list, you can initially set the visibility of the ul to hidden and then use li:hover ul { visibility: visible; } in your CSS.
li:hover ul {
visibility: visible;
}
ul {
visibility: hidden;
} <div>
<li>Add Rows</li>
<li>DeleteRows</li>
<li>View Rows
<ul>
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</div>ul {
background: #333;
}
ul li {
position: relative;
list-style: none;
display: inline-block;
color: white;
}
ul ul {
position: absolute;
left: 0;
right: 0;
top: 100%;
display: none;
padding-left: 0;
}
ul li:hover ul {
display: block;
}
ul ul li {
display: block;
width: 100%;
}<div>
<ul>
<li>Add Rows</li>
<li>DeleteRows</li>
<li>View Rows
<ul>
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</ul>
</div>How can I trigger events on same level divs that overlap in different areas? When there are multiple divs overlapping, only one of them gets triggered. Is there a way to trigger events on all overlapped same level divs? Here is an example code snippet: ...
Within my Next.js project, I have successfully implemented a custom hook and component. The functionality works smoothly as each section opens independently without interfering with others, which is great. However, there are two issues that I am facing. Fi ...
I am trying to display the text within a ul tag one by one when hovering over some text. However, I am encountering an error. How can I resolve this issue? You can view the code for mouseover functionality by hovering over the "hover here hover again" lin ...
As I work on my application, I am facing a challenge in writing a test for the appearance of a react-hot-toast. Whenever a specific button is clicked, this toast pops up on the screen and disappears after a brief moment. Despite being visible both on the s ...
Struggling with correctly filtering data in JavaScript. Here's an example where var1 = 20, var2 = 10, var3 = 30, var4 = 40. This is the code snippet: var variables = ['var1', 'var2', 'var3', 'var4'], values = [ ...
Scenario: My website is built using EXTJS6. I have a web service that requires the uploaded email to be sent in byte array format. Inquiry: What is the process for converting a .msg file to a byte array using JS (or EXTJS)? Can we treat it as a simple bin ...
Having difficulties with the menu on my website wrapster.sebastianbialek.pl. Whenever I resize the browser to mobile version and click on the collapse button, the menu shows up briefly and then disappears. Any assistance in resolving this issue would be gr ...
I recently encountered an issue while using ember-browserify to locate npm modules in my ember-cli applications - it seems to not function properly for ember-cli addons. This leads me to wonder: Are there alternative methods for importing npm modules into ...
My understanding is that knockout effectively deals with this scenario, but I just want to double-check. Is it correct to assume that when using the value binding with a form control such as input/textarea, there is no risk of a script injection attack? O ...
I'm looking to dynamically create angular watches on one or more model attributes. I attempted the following approach: var fields = ['foo', 'bar']; for (var i=0, n=fields.length; i<n; i++) { $scope.$watch('vm.model.&ap ...
I'm looking to use fancytree.js to display an alert message only when clicking on nodes in the second level. For example: <ul> <li>1</li> <ul> <li>1.1</li> ...
How can I execute an AJAX request to run an INSERT query? The query requires a value from a PHP session, but the JavaScript request does not recognize that value. Why is this happening and what steps should I take? See some of the code below: JS: $(&apo ...
My webpage features two radio buttons, "No" and "Yes," with the default selection being "No." I have implemented CSS styles for the checked elements, but they only work once physically selected. My goal is to apply these styles immediately on page load wit ...
Here, we have a SubComponent and a MainComponent created to showcase an image collection. The Subcomponent allows you to toggle between pictures in the collection using the onclick() event. The MainComponent also includes links to other collections, which ...
Is there a way to change the opacity of only the background of a paragraph without affecting the text? When I try to adjust the opacity, it changes both the text and the background. How can I resolve this issue? HTML <div id="opener"> <p id="in ...
Posting this as a question-answer post. How can one effectively utilize the $templateCache in the templateProvider of a route within ui-router when attempting to refactor the code? Injection is ineffective, and Angular cannot inject by reference. For ins ...
const stateValues = { code: '', product: '', checked: 'false', jobCardNo: '', openDate: '', completionDate: '', serial: '', technicalNo: '', ...
How can I resize a button in Sencha Touch 2 to make it smaller? I need to change its height. Any sample code you could provide would be greatly appreciated! Thanks navigationBar: { items:[{ xtype: 'button', ...
Currently, I am utilizing jQuery along with the hashchange plugin by Ben Alman. The following code snippet showcases a standard approach to retrieve the hash name and load content accordingly: $(window).hashchange(function() { var hash = location.hash; va ...
I've been struggling with passing a variable to a module. In my node.js setup, I have the following structure: The main node.js server (server.js): // modules ================================================= var express = require('expr ...