Question

我有这样的事情：

当用户在特定露营地上空盘旋时，会发生这种情况

我想要实现的目标：

当用户点击编辑按钮（蓝色）时，请转到编辑页面
当用户点击删除时，删除露营地
当用户点击灰色阴影区域的任何其他位置时，他只是进入露营地展示页面（即包含更多信息的页面）营地）

我的问题：当用户点击编辑/删除时，我只是被重定向到露营地展示页

守则：

<a href="/campgrounds/<%= ground._id %>/" class="imagePins">

    <div class="imgAndCap">
         <div class="imgbackground" style="background-image: url(//someurl');"></div>
         <div class="caption">
              <p> <%= groundname %></p>
         </div> <!-- caption end -->
    </div>

    <div class="overlay">
         <% var groundDelID = campgrounds[i].id + "groundDelete"; %>
         <i id="<%=groundDelID%>" class="fa fa-times groundDelete" aria-hidden="true"></i>
         <% var groundEditID = campgrounds[i].id + "groundEdit"; %>
         <i id="<%=groundEditID%>" class="fa fa-pencil-square-o groundEdit" aria-hidden="true"></i>
         <script> 
             $("#<%=groundEditID%>").on("click", function(e) { 
                   window.url("/campgrounds/<%= ground._id %>/edit");
             });
         </script>
     </div>

我尝试过像

这样的事情

<a href=""/campgrounds/<%= ground._id %>/edit"><i class="fa fa-pencil-square-o groundEdit" aria-hidden="true"></i></a>

但这会禁用悬停效果 - 即悬停透明黑色背景时没有出现，图标也没有出现

CSS：不确定这是多么相关，但无论如何都要添加

.imagePins {
    display: block;
    margin: 0.2rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    text-decoration:  none;
    color: dimgray;
    position: relative;
}

.overlay {     
   display: none;
}

.overlay i {
  float: right;
  font-size: 2rem;
  margin-top: 1rem;
}

.groundDelete {
  color: #d9534f;
  margin-right: 1rem;
}

.groundEdit {
  color: #5bc0de ;
  margin-right: 0.7rem;
}

.imagePins:hover .overlay { 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    top: 0;
    left:0;
}

那么如何将链接堆叠在一起呢？

Answer 1

当然。您已将整个项目包装在<a href="/campgrounds/<%= ground._id %>/" class="imagePins"></a>中，因此您将重定向该链接。你应该创建一个包装器，然后在其中添加链接。

<div class="imagePins>
  <a href="/campgrounds/<%= ground._id class="imagePins__link" %></a>

  ...

</div>

并在CSS中：

.imagePins {
  position: relative;
  ...
}

.imagePins__link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
}

.groundDelete,
.groundEdit {
  position: relative;
  z-index: 100;
}

Answer 2

我认为您应该使用stopPropagation方法来编辑和删除事件。

堆栈图像/图标链接在彼此之上

2 个答案: