Can I make both images with different opacity'

问题:

I am trying to make the small plus rounded button to be with full opacity and still clickable on my effect At the moment it is taking the opacity for the whole link (which i would like to stay like that), if i change the z-index it goes on top of the link but then it is not launching the fancybox.

.img-hover > a  {
    position:relative;
}
.img-hover {
    display:inline-block;
    position:relative;
    cursor:pointer;
}
.img-hover .hover {
    display:none;
    background:#000;
    border-radius:50px;
    height:35px;
    width:30px;
    font-size:42px;
    font-weight:bold;
    color:#fff;
    padding:10px 15px 20px 20px;
    position:absolute;
    cursor:pointer;
    right:180px;
    top:180px;
}

Here is the jsfiddle i created http://jsfiddle.net/W9uju/1/

Thanks in advance

回答1:

You could set z-index and then use this snippet:

$(function() {
    $(".img-hover").hover(
        function() {
            $(this).children("a").fadeTo(200, 0.5).end().children(".hover").show();
        },
        function() {
            $(this).children("a").fadeTo(200, 1).end().children(".hover").hide();
        });
}).on('click',function(e){
    if($(e.target).hasClass('hover'))
        $(this).find('.fancybox')[0].click();
});

DEMO

On modern browsers, you could set pointer-events:none; too

DEMO pointer-events

回答2:

Edit:

sorry, I've understood the opposite of what you re looking for, here an example with what you need:

http://jsfiddle.net/W9uju/9/

---

Use rgba or hsla as background color:

rgba(0,0,0,0.5);

rgba(
  0,  // R red
  0,  // G green
  0,  // B blue
  0.5 // A alpha
)

hsla(0,0%,0%,0.5);

hsla(
  0,  // H hue
  0%, // S saturation
  0%, // L lightness
  0.5 // A alpha
)

To provide fallback compatibility you should write:

background-color: #000; /* Old browsers (IE8<) */
background-color: hsla(0,0%,0%,0.5); /* Modern browsers */