Steps to incorporate hover buttons into a card layout

Question

Steps to incorporate hover buttons into a card layout

I'm looking to enhance the card view by adding edit and delete buttons that appear after hovering over it. Here's my code:

<div class="card">  //image section
    <img class="card-img-top" alt="Card image" style="width:50%" src="images/img1">
    <div class="card-body">
    <div class="button" onClick="updateData()">
        <i class="fa fa-edit" style="font-size:24px"></i>
    </div>
    <div class="button" onClick="deleteData()">
        <span aria-hidden="true" style="font-size:40px">&times;</span>
    </div>'
    <p class="card-text">Text description</p>
    </div>
</div>

I need help figuring out how to make those two buttons visible when I hover over the card. Can anyone advise me on this?

html css bootstrap-4

Answer 1

Answer №1

Implement the following selector

   button {
   display: none; /* Button hidden */
   }

   .divbutton:hover button {
   display: block; /* Show button on div hover */
   }

Example

.card {
    height: 30px;
    background: #000;
}

button {
    display: none;
}

.card:hover button {
    display: block;
}

<script src="https://use.fontawesome.com/3aa0d20210.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060140e150e13">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card"> 
    <img class="card-img-top" alt="Card image" style="width:50%" src="images/img1">
    <div class="card-body">
    <button class="button" onClick="updateData()">
        <i class="fa fa-edit" style="font-size:24px"></i>
    </button>
    <button class="button" onClick="deleteData()">
        <span aria-hidden="true" style="font-size:40px">&times;               </span>
    </button>'
    <p class="card-text">Text description</p>
    </div>
</div>

Ensure to set a height or min-height for your div element, otherwise it will have a height of 0 if no content is present. Avoid using display: none; as inline styling, as inline styles have high specificity, leading to the need for using !important which is not recommended.

In the provided code snippet, I am styling the button {/*Styles*/}, but this is a general element selector, so remember to assign a class to your button element.

Answer 2

Implement the following selector

   button {
   display: none; /* Button hidden */
   }

   .divbutton:hover button {
   display: block; /* Show button on div hover */
   }

Example

.card {
    height: 30px;
    background: #000;
}

button {
    display: none;
}

.card:hover button {
    display: block;
}

<script src="https://use.fontawesome.com/3aa0d20210.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060140e150e13">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card"> 
    <img class="card-img-top" alt="Card image" style="width:50%" src="images/img1">
    <div class="card-body">
    <button class="button" onClick="updateData()">
        <i class="fa fa-edit" style="font-size:24px"></i>
    </button>
    <button class="button" onClick="deleteData()">
        <span aria-hidden="true" style="font-size:40px">&times;               </span>
    </button>'
    <p class="card-text">Text description</p>
    </div>
</div>

Ensure to set a height or min-height for your div element, otherwise it will have a height of 0 if no content is present. Avoid using display: none; as inline styling, as inline styles have high specificity, leading to the need for using !important which is not recommended.

In the provided code snippet, I am styling the button {/*Styles*/}, but this is a general element selector, so remember to assign a class to your button element.

Answer 3

Answer №2

This code snippet should meet your needs:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>

    </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
            </p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
        <div id="outer" style="display:none">
            <button type="button" class="btn btn-primary">Edit</button>
            <button type="button" class="btn btn-primary">Delete</button>
        </div>
    </div>
    <script>
        $(document).ready(
            $(".card").mouseenter(function() {
                $("#outer").css("display", "block");
            }),
            $(".card").mouseleave(function() {
                $("#outer").css("display", "none");
            })
        )
    </script>
</body>

</html>

verify: https://jsfiddle.net/L46ug3bt/

Many thanks!

Answer 4

This code snippet should meet your needs:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>

    </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
            </p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
        <div id="outer" style="display:none">
            <button type="button" class="btn btn-primary">Edit</button>
            <button type="button" class="btn btn-primary">Delete</button>
        </div>
    </div>
    <script>
        $(document).ready(
            $(".card").mouseenter(function() {
                $("#outer").css("display", "block");
            }),
            $(".card").mouseleave(function() {
                $("#outer").css("display", "none");
            })
        )
    </script>
</body>

</html>

verify: https://jsfiddle.net/L46ug3bt/

Many thanks!

Answer 5

Answer №3

Check out this handy block of Javascript code:

$(() => {
  $(".card").on("mouseenter", () => { // Trigger when mouse enters card
    $(".btn").removeClass("d-none") // Remove the d-none class to show button
  });
  $(".card").on("mouseleave", () => { // Opposite action on mouse leave
    $(".btn").addClass("d-none")
  });
});

<script src="https://use.fontawesome.com/3aa0d20210.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2924243f383f392a3b0b7f657e6578">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">
  <!-- image section -->
  <img class="card-img-top" alt="Card image" style="width:50%" src="images/img1">
  <div class="card-body">
    <div class="btn btn-success d-none" onClick="updateData()">
      <i class="fa fa-edit" style="font-size:24px"></i>
    </div>
    <div class="btn btn-danger d-none" onClick="deleteData()">
      <span aria-hidden="true" style="font-size:40px">&times;</span>
    </div>'
    <p class="card-text">Text description</p>
  </div>
</div>

The "d-none" class effectively hides the buttons by adding a display: none. Also, note that in Bootstrap 4, there's no .button, so make sure you're using the correct version!

Answer 6

Check out this handy block of Javascript code:

$(() => {
  $(".card").on("mouseenter", () => { // Trigger when mouse enters card
    $(".btn").removeClass("d-none") // Remove the d-none class to show button
  });
  $(".card").on("mouseleave", () => { // Opposite action on mouse leave
    $(".btn").addClass("d-none")
  });
});

<script src="https://use.fontawesome.com/3aa0d20210.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2924243f383f392a3b0b7f657e6578">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">
  <!-- image section -->
  <img class="card-img-top" alt="Card image" style="width:50%" src="images/img1">
  <div class="card-body">
    <div class="btn btn-success d-none" onClick="updateData()">
      <i class="fa fa-edit" style="font-size:24px"></i>
    </div>
    <div class="btn btn-danger d-none" onClick="deleteData()">
      <span aria-hidden="true" style="font-size:40px">&times;</span>
    </div>'
    <p class="card-text">Text description</p>
  </div>
</div>

The "d-none" class effectively hides the buttons by adding a display: none. Also, note that in Bootstrap 4, there's no .button, so make sure you're using the correct version!

Steps to incorporate hover buttons into a card layout

Answer №1

Answer №2

Answer №3

Similar questions

I am having trouble with the spacing on my website, even after I have tried declaring it

Creating a Simple HTML Table Using PHP Arrays

In IE11, the fixed position does not depend on the parent container

unable to insert HTML image

Accessing HTML generated from a PHP file through AJAX

Is there a way to share the Username and Password without the need to manually input it?

Proper implementation of the HTML5 <hr> element

Customize the color of arrows within an ng-bootstrap carousel

Loading and refreshing iframe content in real-time using JQuery on change() and keyup() events

Troubleshooting: Issue with AJAX xmlhttp.send() functionality

Displaying image issues persist on Safari browsers for Mac and iPhone

Tips for Presenting Json Information in Bootstrap Columns

Leveraging PHP for generating a list of items without a specific order from data retrieved

Why is the current Menu Item highlight feature not functioning properly?

Blending PHP with jQuery

Adjusting the alignment of table cell contents without the use of JavaScript or external CSS files is necessary

Challenges with border-color and CSS input:focus

Having Trouble with Form Submission Button Across Different Web Browsers

What is the method for updating the content within a div element?

A beginner's guide to implementing the GET method with Express.js