Question

当用户将鼠标悬停在另一个元素上时，我希望使“关闭按钮”对用户可见，以表明他们可以删除该元素。这是尝试的jquery函数：

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

如您所见，我试图找到一个ID为以“ deleteNotes”开头的ID的最近按钮（因为我所有的“ 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

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

尝试使用此

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

Answer 2

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

如何通过使用jQuery悬停在另一个HTML元素上来更改另一个HTML元素的可见性/不透明度？

2 个答案: