悬停

Question

I am trying to add a up triangle under the image when hover, I don't know how to style the "img:before to make it work, this is the 1st time I am suing before, not too sure how to put together

以下是代码：

＆＃13;

＆＃13;

var $j = jQuery.noConflict();
  $j('.moreInfo').hover(function() {
    $j(this).find('.tooltip').fadeIn(250).css("display","inline");
  }, function() {
    $j(this).find('.tooltip').fadeOut(250).css("display","none");
 
});

＆＃13;

div[id^='sl']{width:100px; height:100px; background:gray;display:none; text-align: center; line-height:100px; font-size:80px; color:white; position:absolute; left:0; top:0;}

/*label selected and tooltip style*/
.moreInfo {
      margin-right: 10px;
      display: inline;
      box-sizing: border-box;     
}
   
.moreInfo .tooltip {
    background:#EFEFEF;
    padding:5px 10px 5px 5px;
    color: #878787;
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 0px;
    display:none;
}

img:before{
      content:"";
      position:absolute;
      left:20%;
      bottom: 100%;
      border-width: 10px;
      border-style: solid;
      border-color: transparent transparent #EFEFEF transparent;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div>
<span class="moreInfo"><img src="https://info.bio-rad.com/rs/272-THL-329/images/youtube_icon.jpg" alt="youtube_icon"><span class="tooltip">I am a tooltip! <a href="http://google.com" target="_blank">link</a></span></span> 
  
<span class="moreInfo"><img src="https://info.bio-rad.com/rs/272-THL-329/images/linkedin_icon.jpg" alt="linkedin_icon"><span class="tooltip">I am a tooltip! <a href="http://google.com" target="_blank">link</a></span></span> 
  
<span class="moreInfo"><img src="https://info.bio-rad.com/rs/272-THL-329/images/twitter_icon.jpg" alt="ytwitter_icon"><span class="tooltip">I am a tooltip! <a href="http://google.com" target="_blank">link</a></span></span> 
  
 <span class="moreInfo"><img src="https://info.bio-rad.com/rs/272-THL-329/images/facebook_icon.jpg" alt="facebook_icon"><span class="tooltip">I am a tooltip! <a href="http://google.com" target="_blank">link</a></span></span> 

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

大多数浏览器不支持在img标记上使用:after或:before。 因此，您必须在<span>标记上执行此操作。下面的代码应该有助于你。

＆＃13;

＆＃13;

var $j = jQuery.noConflict();
  $j('.moreInfo').hover(function() {
    $j(this).find('.tooltip').fadeIn(250).css("display","inline");
  }, function() {
    $j(this).find('.tooltip').fadeOut(250).css("display","none");
 
});

＆＃13;

div[id^='sl']{width:100px; height:100px; background:gray;display:none; text-align: center; line-height:100px; font-size:80px; color:white; position:absolute; left:0; top:0;}

/*label selected and tooltip style*/
.moreInfo {
  position: relative;
      margin-right: 10px;
      display: inline;
      box-sizing: border-box;     
}
   
.moreInfo .tooltip {
    background:#EFEFEF;
    padding:5px 10px 5px 5px;
    color: #878787;
    position: absolute;
    z-index: 1;
    top: 30px;
    left: 0px;
    display: none;
    width: 80px;
}

.moreInfo::before{
      content:"";
      position:absolute;
      left: 20%;
      bottom: -6px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #f00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div>
<span class="moreInfo"><img src="https://info.bio-rad.com/rs/272-THL-329/images/youtube_icon.jpg" alt="youtube_icon"><span class="tooltip">I am a tooltip! <a href="http://google.com" target="_blank">link</a></span></span> 
  
<span class="moreInfo"><img src="https://info.bio-rad.com/rs/272-THL-329/images/linkedin_icon.jpg" alt="linkedin_icon"><span class="tooltip">I am a tooltip! <a href="http://google.com" target="_blank">link</a></span></span> 
  
<span class="moreInfo"><img src="https://info.bio-rad.com/rs/272-THL-329/images/twitter_icon.jpg" alt="ytwitter_icon"><span class="tooltip">I am a tooltip! <a href="http://google.com" target="_blank">link</a></span></span> 
  
 <span class="moreInfo"><img src="https://info.bio-rad.com/rs/272-THL-329/images/facebook_icon.jpg" alt="facebook_icon"><span class="tooltip">I am a tooltip! <a href="http://google.com" target="_blank">link</a></span></span> 

</div>

＆＃13;

＆＃13;

＆＃13;