时间戳

首页 > 解决方案 > 如何通过使用 jquery 将鼠标悬停在另一个 html 元素上来更改另一个 html 元素的可见性/不透明度？

jquery - 如何通过使用 jquery 将鼠标悬停在另一个 html 元素上来更改另一个 html 元素的可见性/不透明度？

问题描述

我想让用户在悬停在另一个元素中时可以看到“关闭按钮”，以表明他们可以删除该元素。这是尝试的jquery函数：

$("[id^='titleNotes'],[id^='contentNotes']").mouseover(function() {
    $(this).closest("button").find("[id^='deleteNotes']").css("visibility", "visible");
    });

如您所见，我试图找到最近的按钮，其 id 的名称以“deleteNotes”开头（因为我所有的“deleteNotes”id 名称都以唯一编号结尾）。

这是CSS：

button[id^=deleteNotes] {
    visibility: hidden;
    color: black;
    position: relative;
    right: -5px;
    top: 15px;
}
button[id^=deleteNotes]:hover {
    background-color: black;
    color: white;
    border-radius: 10px;
    box-sizing: border-box;
}

这是使用关闭按钮的代码：

<div class="grid-padding-all" id="<?php echo $note_id; ?>">
    <button type="button" id="deleteNotes<?php echo $note_id; ?>" class="close" data-dismiss="modal">&times;</button>
    <textarea name="note_title" id="titleNotes<?php echo $note_id; ?>" class="note_display_title" readonly="" title="created on <?php echo $date_created; ?>. Note type: <?php echo $note_type; ?>"><?php echo $note_title; ?></textarea>
    <textarea name="note_record" id="contentNotes<?php echo $note_id; ?>" class="note_display_record" readonly="" title="created on <?php echo $date_created; ?>. Note type: <?php echo $note_type; ?>"><?php echo $note_record; ?></textarea>
</div>

我可能使用 css 错误地接近它，或者创建了一个错误的 jquery 来搜索最近的关闭按钮。每次我将鼠标悬停在文本框上时，是否有更好的方法来显示关闭按钮？

示例 jfiddle：https ://jsfiddle.net/x5no0vh3/1/

标签： jqueryhtmlcss

解决方案

您正在尝试在按钮中查找元素

尝试使用这个

$(this).parent().find("[id^='deleteNotes']").css("visibility", "visible");});

推荐阅读