Stack Image/Icon Links on top of each other

Question

I have something like this:

When the user hovers over a specific campground, this happens

What I want to achieve:

• When user clicks edit button (blue), go to edit page
• When user clicks delete, delete campground
• When user clicks anywhere else in the gray shaded area, he just goes to the campground show page (ie a page with more info on that campground)

My problem: When the user clicks edit/delete, I'm just redirected to the campground show page

The Code:

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

I tried doing something like

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

But this disabled the hover effect -- ie, on hover the transparent black background didn't appear and neither did the icons

CSS: Not sure how relevant this is, but adding it anyway

.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;
}

So how do I stack links on top of each other?

Answer 1

Of course. You have whole item wrapped in <a href="/campgrounds/<%= ground._id %>/" class="imagePins"></a> , so you will be redirect on that link. You should make a wrapper and than add link into it.

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

  ...

</div>

and in 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方法来编辑和删除事件。