如何使可点击鼠标悬停在后面？

Question

A user hovers over glyphicon-globe image and behind it lies a like button and a comment form. When a user goes to click on the button or the comment form nothing happens. How can I make clickable what lies behind the globe?

view

<div class="image-container">
  <span class="glyphicon glyphicon-globe" style="font-size: 7em; color: white; text-align: center; width: 100%; background-color: #446CB3; border-radius: 4px; padding: 19%;" id="image-foreground"></span>
  <div class="text-wrapper">
    <div class="like-button">
      <%= link_to like_challenge_path(:id => @challenge.id), class: "btn", method: :post do %>
        <span class='glyphicon glyphicon-thumbs-up'></span> Like
      <% end %>
    </div>

    <div class="text-background">
      <%= render "comments/form" %>
    </div>
  </div>
</div>

css

.image-container {
  position: relative;
  height: auto;

  #image-foreground {
    position: absolute;
    z-index: 2;
    opacity: 1;
    &:hover {
      opacity: 0;
    }
  }
}

.text-wrapper {
  opacity: 1;
}

no hover

hover

Answer 1

There's two ways I'd try. So you know, giving an element opacity: 0; won't make it disappear completely. It is still there in position but not able to be seen. To have an element removed also use both opacity: 0; and visibility: hidden in your &:hover action.

The second way you could do it is stick with opacity: 0 but also set z-index: 0 (or any number below the z-index of the underlying layers. You have the hover working nicely but because it has a higher z-index than the underlying layers, it is still technically sitting on top of them and covering them, making them unclickable.

Hope that helps

Also a side note to the answer below, one of the answers here suggested using display: none in your hover action. display: none doesn't work for this as once an element is set to display: none , it is no longer there, not part of the DOM and so breaks the hover action.

Answer 2

you could do on hover display the blue screen as none.

.image-container:hover {
   display: none;
}

it that what you wanted ?

Answer 3

Here was the trick that worked:

.hide-globe {
  position: absolute;
  width: 100%;
  background-color: #ccac00;
  padding: 100px;
}

.text-wrapper {
  position: absolute; // This was essential
  opacity: 0;
  z-index: 1;
  width: 100%;
  &:hover { 
    opacity: 1;
    background-color: white; // And this helped make the image seemingly go away
  }
}