Question

我已经知道了，但我的链接无法点击。我对JS很新，所以我不确定我做错了什么。任何帮助将非常感激！ JS小提琴：http://jsfiddle.net/u7m2ewvm/

$(document).ready(function(){

$('.L, .R').hide();

 $("div.wrapper").css({
    height: $("img").height(),
    width: $("img").width()
  });

  var speedEase = 300;
  var speedEaseSlow = 500;


  $("div.wrapper").hover(function(){

    $("div.First").hover(function(){
      $(".left").stop().fadeIn(speedEase);
      $('.L').stop().fadeIn(speedEaseSlow);
      $(".none, .right").stop().fadeOut(speedEase);

    }, function(){
      $(".left").stop().fadeOut(speedEase);
      $('.L').stop().fadeOut(speedEaseSlow);

    });

    $("div.Second").hover(function(){
      $(".right").stop().fadeIn(speedEase);
      $('.R').stop().fadeIn(speedEase);
      $(".none, .left").stop().fadeOut(speedEaseSlow);

    }, function(){
      $(".right").stop().fadeOut(speedEase);
      $('.R').stop().fadeOut(speedEaseSlow);
    });

  },function(){
     $(".left, .right").stop().fadeOut(speedEase);
     $(".none").stop().fadeIn(speedEase);
  });
})

CSS：

div.wrapper img{
  position: absolute;
  display: block;
  height:411px;
  width:990px;
}
div{

}
.left, .right{
  display: none;
}
.half{
  width: 50%;
  float: left;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 999;
}

.text {
position:absolute;
display:none;
width:150px;
height:auto;
font-size:14px;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
z-index:10;
}

.R {
top:120px;
left:800px;
display:none;
}

.L {
top:70px;
left:60px;
display:none;
}

.R>a, .L>a {
background-color:#E0601E;
padding:8px 3px;
border-radius:4px;
display:block;
color:#FFFFFF;
font-size:14px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align:center;
text-decoration:none;
font-weight:bold;
opacity:0.8;
}

.R>a:link,.R>a:visited, .L>a:link,.L>a:visited {
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
opacity:0.8;
}

.R>a:hover,.R>a:active, .L>a:hover, .L>a:active {
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
opacity:1;
}

HTML：

<div class="wrapper">
<div class="text L">
    <p>It’s style and substance that get your juices going. The crafted glass of the Infruition Classic sits well on any desk. Show that you’re health and style-concious with the classic design that started it all!</p>
    <a href="#" class="button">View more</a>
</div> <!--TEXT 1-->

<div class="text R">
    <p>You’re a slice, dice and dash? You’re clearly the Infruition Sport. Get a six pack of fruit and get your body ready for some Infruition action today!</p>
    <a href="#" class="button">View more</a>
</div> <!--TEXT 1-->

  <div class="half First"></div>
  <div class="half Second"></div>
  <img class="left" src="http://mobileheads.co.uk/infruition/InfruitionWIAYLeftRollover.jpg" alt=""/>
  <img class="none" src="http://mobileheads.co.uk/infruition/InfruitionWIAYNoRollover.jpg" alt=""/>
  <img class="right" src="http://mobileheads.co.uk/infruition/InfruitionWIAYRightRollover.jpg" alt=""/>
</div>

jQuery悬停文本和链接不可点击

0 个答案: