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>I'm currently working on an app that streams audio from a microphone using web sockets. I'm struggling to play the web socket response in an audio control. Can someone please provide guidance on how to play audio buffer in an audio control? Your ...
I have a hierarchical grid set up with a ClientDetailTemplate in the following manner. @(Html.Kendo().Grid(Model.NotesList) //Binding the grid to NotesList .Name("activityNotesGrid") .Columns(columns => { // Creating a col ...
I have implemented a login system and attempted to switch from Mysqli to PDO. Currently, my website is connected to a database using phpMyAdmin/MySQL. I have successfully converted the login part of the system to use PDO. Now, I will demonstrate the Sign ...
Trying to create a dropdown menu with various options and colors. Managed to set background colors for each option, but once an option is selected, the background color disappears. Is there a way to fix this issue? See my HTML example below: <select> ...
Upon examining the code snippet below, it is apparent that I am attempting to pass the value of a tab's id to a URL. In this instance, I am displaying it in HTML just for illustrative purposes; however, the hashtag id fails to be transferred to the UR ...
$(function() { $("#pagination a").trigger('click'); // When the page loads, trigger a click event $('body').on('click','div.well well-sm',function(){ var list = $(this); $('#myModal .modal-title').h ...
How can I ensure that the scrollbar is always at the top when a user is redirected to a different page after scrolling down on the home page? The autoscroll feature in the code below doesn't seem to be working. Any suggestions would be greatly appreci ...
I am currently exploring the use of JPList to sort on multiple items. As it stands, JPList searches like 'AND' when sorting (e.g. sorting based on an item with tags html, php and jQuery all together), but I am interested in filtering through all ...
Is there a way to verify user or phone existence on the front-end form? I'm using Yup + Formik for all my requirements, and in my backend with Sequelize, I can check if a username or phone number already exists. passport.use( 'register&apos ...
My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...
I need assistance with centering all the content on my website across different screen sizes and browsers. Currently, everything appears off-center and aligned to the left on various screens I have tested. You can view the HTML and CSS code in this link. H ...
I have created a simple profile page where users can edit their profile information. I have placed a button at the end of the page. Initially, the form should be uneditable, but when the button is clicked, the form becomes editable. I attempted to use `dis ...
Scenario Here is a ts file where I am attempting to include the type annotation GetTokenResponse to the function getToken. import { ConfigService } from '@nestjs/config'; import { google, GoogleApis } from 'googleapis'; import { AppCon ...
Currently, I am working on a search result page. The scenario involves a login page redirecting to a homepage that consists of a dropdown menu, a textbox, a button, and an iframe displaying a table with user data (firstname, lastname, middlename). Upon sel ...
I have a JSON file containing contact information which I am retrieving using a service and the following function. My goal is to create a new array called 'contactList' that combines first names and last names from the contacts, adding an &apos ...
$.expr[':'].containsCaseInsensitive = function (n, i, m) { return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; .expr is not recognized. To ensure it's defined, I included a CDN link below: <script src=&qu ...
I have implemented a function in my node server using bcryptjs to hash and compare passwords. Here is the code snippet: this.comparePasswords = function(password1, password2, callback) { bcrypt.compare(password1, password2, function(error, result) { ...
My todo list is stored in a MySQL database with columns for todoTitle and todoDate. However, when I display the todoDate on my website, it shows the date decremented by one day. For example, if the date in the database is 2016-12-20, it will show as 2016-1 ...
Currently, I am passing an id to a new state using $stateParams which works well. However, the issue arises when the user reloads the page since there won't be any values in $stateParams. To solve this problem, I decided to store the $stateParam id in ...
I have been struggling to integrate a Vue.js component into a Laravel blade file. Despite researching tutorials and Stack Overflow solutions, I have not been able to resolve the issue. Below is the template that I want to display: <template> < ...