Discover the secret to toggling Bootstrap 4 cards visibility when hovering over the navigation menu using CSS

Hey, I'm currently working on a project where I want to show and hide specific sections of cards by just hovering over the menu list. While I can successfully hide the cards using CSS, I am facing issues with displaying them using the display:block property for a specific class...

HTML

Navigation Menu

<div class="d-flex justify-content-center">   
    <ul class="nav">
    <li class="nav-item">
      <a class="nav-link itemOne"  href="#">Product 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link itemTwo" href="#">Product 2</a>
    </li>
    </ul>
   </div>

Card Section

  <div class="card  item1" style="width:12rem;">
  <img class="card-img-top item" src="../image1" alt="Card image cap">
  <div class="card-body item1">
  <h5 class="card-title item1">Card title</h5>
  <p class="card-text  item1">This is a wider card with supporting text 
  below as a natural lead-in to additional content. This content is a little 
  bit longer.</p>
 </div>
</div>
<div class="card item2" style="width:12rem;">
<img class="../image2" alt="Card image cap">
<div class="card-body item2">
 <h5 class="card-title item2">Card title</h5>
 <p class="card-text item2">This is a wider card with supporting text below 
  as a natural lead-in to additional content. This content is a little bit 
  longer. 
 </p>
</div>
</div>

CSS

.item1{
display:none;
 }
.item2{
 display:none;
 }
.itemOne:hover .item1{   //Currently not showing item 1
 display:block;
 }
.itemTwo:hover .item2{    //Currently not showing item 2
 display:block;
 }
javascriptjqueryhtmlcssbootstrap-4

Answer №1

To achieve this task, I recommend using jQuery.

Here's the CSS:

.box1, .box2 {
  display: none;
}

jQuery

$('.sectionOne').hover(function() {
    $('.box1').toggle();
});

$('.sectionTwo').hover(function() {
    $('.box2').toggle();
});

Check out this demo.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retain the chosen values even after submitting the form

Consider the following form: <form method="get" action=""> <select name="name"> <option value="a">a</option> <option value="b">b</option> </select> <select name="location"> <opt ...

phpjavascripthtmlwordpressforms

Zooming does not activate the onZoom event

I have created a line chart using react-chartjs-2 and incorporated the chartjs-plugin-zoom plugin. My goal is to have the zoom level displayed in the console whenever the chart is zoomed in or out. However, it seems that the onZoom function is not being tr ...

javascriptreactjschart.jsreact-chartjs-2chartjs-plugin-zoom

"Implementing an AngularJS factory that returns a State object instead of typical JSON data fetched from

I have created two factories and I am calling the first one from the second one in my controller. However, instead of receiving JSON data, I am getting data as $$State. I am new to AngularJS and have tried multiple solutions but have not been able to resol ...

javascriptangularjsjsonangular-promise

Having difficulty with navigating from the jquery css click event within AngularJS

I successfully implemented a click binding using AngularJS with the following code: data-ng-click="vm.newCard()" The newCard() function is defined as: $location.path("xxxx/card/0"); This setup is navigating correctly. However, when using jQuery for a ...

jqueryangularjssingle-page-application

AngularJS implemented a header authorization feature

I've been attempting to include an authorization header in my requests, but I'm facing some issues. Here is the code I am using: var config = {headers: { 'Authorization': token } }; return $http.get('http://localhost:3000/api ...

javascriptangularjsexpress

After implementing infinitescroll, the Jquery on click event ceases to function

Currently, I am utilizing the cakephp framework along with the jquery infinitescroll plugin to dynamically load content. Each post includes a link with an ajax action. Initially, when loading the page, there are 5 posts and the ajax links function properl ...

phpjqueryajaxcakephp

The process of filtering a model stops at the third character and results in an empty output

Whenever I input a value into the 'temp_dollars' model and use a watch property to filter it, the input only retains the first 3 characters and resets. For instance: When I type 123, The model value remains as 123. But wh ...

javascriptvue.jsvuejs2

Click on the button to fetch data from the database using AJAX in Laravel

My goal is to dynamically load the `data-id` from a drop-down menu when a list item is clicked, retrieving the data from a database and appending it to a table. Currently, I have successfully loaded the data id in the drop-down menu and upon clicking on a ...

jqueryjsonajaxlaravellaravel-5.4

Guidance on incorporating CSS into ES6 template literals within a react framework

I am trying to implement the Material UI stepper in my React application. The step content is set up as a string literal. My goal is to include CSS styling for paragraphs within the step content. Many online resources suggest using \n to add a line ...

javascriptreactjsecmascript-6material-uitemplate-literals

Tips for verifying a list of objects within a request body with JOI

I'm in the process of validating the request body for an order placement. The request body contains an array of JSON objects that I need to validate, but I keep encountering the error message "productId" is required. Below is the structure of my requ ...

javascriptnode.jsmongodbexpressjoi

The JavaScript variable assigned from the MySQL query through an Express API is returning as undefined, indicating that the promise is not resolving to

Hey there, I'm trying to assign the result of a MYSQL query to a JS variable so that I can use it multiple times. However, whenever I try to do this, I end up receiving an empty array. Can anyone point out what might be causing this issue in my code? ...

javascriptexpress

Small jumps occur when implementing the scrollTop jquery animation

I've encountered an issue with the scrollTop jquery animation that I can't seem to resolve. It seems to micro-jump right before the animation, especially when there is heavier content. I'm puzzled as to why this is happening... Here's ...

javascriptjqueryhtmlmousewheelscrolltop

Using AngularJS date picker to set value in Spring model setter

When using AngularJS with Spring, I noticed a discrepancy in the date values between my view file and the POJO User object. In my view file, I have used an input type date to bind the "user.dateOfBirth" attribute. When I select a date, it is displayed cor ...

javascriptangularjsspringdatetime

What is the best way to ensure that the user interface stays updated with alterations made to

I am currently studying various front end design patterns, and I repeatedly come across the idea of implementing a virtual shopping cart in a shopping cart scenario. The suggestion is to have the user interface actively monitor any changes to the cart and ...

javascriptjqueryshopping-cart

Responsiveness of a div containing various content

I am currently working with Bootstrap 4 and my HTML code looks like this: <div class="font-weight-bold col-12"> <span>Filter :</span> <input type="text" class="form-control" /> </div> Initial ...

htmlcssbootstrap-4responsive

Merging arrays with the power of ES6 spread operator in Typescript

My goal is to merge two arrays into one using the spread object method as shown in the code snippet below: const queryVariable = { ...this.state, filters: [...Object.keys(extraFilters || {}), ...this.state.filters], } The this.state.filte ...

javascripttypescriptecmascript-6

Utilize a unique CSS selector and content property to insert a space character between two inline-block elements

I have a group of connected span elements with the class tag from bootstrap v4. Because they are generated from a react.js array of JSX elements, they sit adjacent to each other without any spacing between them: <span class="tag tag-primary">text< ...

csscss-selectorspseudo-elementcss-content

Guide on efficiently injecting data into a database using JavaScript and SQL from an array of objects

Let's simplify this process. I am creating a dynamic form for clients to submit data to a PostgreSQL database using React on the front end and NodeJs on the back end. Once the form is filled out, the inputs are stored in an array of objects like this ...

javascriptsqlnode.jsreactjspostgresql

The Jquery animate function is not compatible with the transform property

I am facing an issue with the Jquery animate function. Despite trying various solutions, I have been unable to get it to work. Below is the HTML code that I have used: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

javascripthtmljquerycssjquery-animate

How does the use of let versus const differ when iterating through a collection?

Utilizing Node.js (ES6) to iterate through each item in a collection like the one provided below: var statuses = [{ statusId: 1, description: 'New' }, { statusId: 2, description: 'Pending' }, { ...

javascriptnode.jsecmascript-6