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

Question

我想让“关闭按钮”在用户悬停在另一个元素上时对他们可见，以表明他们可以删除该元素。这是尝试的 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/

Answer 1

$.closest() 搜索给定元素的父元素。按钮在这里不是 parent 。 尝试: $("[id^='titleNotes'],[id^='contentNotes']").mouseover(function() { $(this).closest(".grid-padding-all").children("[id^='deleteNotes']").css("visibility", "visible"); });