Как добавить кнопку наведения в представление карты

ProgramBox

Как добавить кнопку наведения в представление карты

Post author:admin
Запись опубликована:20 августа, 2022
Post category:Вопросы по программированию

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я хочу добавить кнопку редактирования и удаления в режим просмотра карты после наведения на нее. Вот мой код

 <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">amp;times;</span>
    </div>'
    <p class="card-text">Text description</p>
    </div>
</div>

Я хочу отображать две кнопки при наведении курсора мыши на карту. Как я могу это сделать?

1. вы можете воспользоваться ответом ниже!!

2. Спасибо всем за ответы, но всякий раз, когда я добавляю строку link или script в свой html-код, мой основной веб-дизайн меняется. Тогда что мне делать?

3. Спасибо за ответы. Но, добавив строку link или script в коде, мой основной веб-дизайн изменился. <link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384HSMxcRTRxnN Bdg0JdbxYKrThecOKuH5zCYotlSAcp1 c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;900display=swap"rel="stylesheet">

4. вам нужно будет добавить ее для jquery, если вы меняете DOM

Ответ №1:

Используйте приведенный ниже селектор

    button {
   display: none; /* Hide button */
   }

   .divbutton:hover button {
   display: block; /* On :hover of div show button */
   }

ДЕМОНСТРАЦИЯ

 .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/bootstrap@4.5.3/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">amp;times;               </span>
    </button>'
    <p class="card-text">Text description</p>
    </div>
</div>

Также убедитесь, что вы назначили height min-height своему div элементу какое-либо или, иначе это будет 0 так, поскольку оно не содержит никакого содержимого. Кроме того, не используйте display: none; как встроенный стиль, поскольку встроенные стили имеют самую высокую специфичность, и, следовательно, вы будете вынуждены использовать !important , что плохо.

В приведенном выше примере я использую button {/*Styles*/} , но это общий селектор элементов, поэтому убедитесь, что вы определили a class для своего button элемента.

1. почему это дает эффект мерцания??? не знаю, как это принимается.

2. @nikhilsugandh Потому что, я думаю, ему нужен чистый CSS, потому jquery что в вопросе нет тега

3. @Aditya пожалуйста, отметьте «ДОСТАТОЧНО» в моем ответе, если сообщение не помечено jquery

Ответ №2:

Этого было бы достаточно:

 <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>

проверьте:
https://jsfiddle.net/L46ug3bt /

Спасибо!!

Ответ №3:

Вот некоторый код Javascript, который может это сделать:

 $(() => {
  $(".card").on("mouseenter", () => { // When the mouse enters the card
    $(".btn").removeClass("d-none") // Remove the d-none class
  });
  $(".card").on("mouseleave", () => { // The opposite
    $(".btn").addClass("d-none")
  });
});

 <script src="https://use.fontawesome.com/3aa0d20210.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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">amp;times;</span>
    </div>'
    <p class="card-text">Text description</p>
  </div>
</div>

Класс «d-none» добавляет display: none к кнопкам. Кстати, я почти уверен, что .button этого не существует в BS4. Может быть, вы используете BS3?

1. Вопрос не был помечен jQuery. Кроме того, хотя вы, возможно, предоставили рабочее решение, хорошие ответы должны отвечать на исходный вопрос, чего вы здесь не сделали.

2. Bootstrap включает jQuery, но да. Могло бы быть лучше.

Метки: Как добавить кнопку наведения в представление карты