Question

嗨我现在正在撕扯我的头发，我在网上发现这个脚本让我可以使用自己的谷歌+按钮代替他们丑陋的按钮

html:        
<div class="googleplus">  
    <div class="googlehider">  
        <g:plusone annotation="none"></g:plusone>  

        <!-- Place this render call where appropriate -->  
        <script type="text/javascript">  
          window.___gcfg = {lang: 'en-GB'};  

          (function() {  
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;  
            po.src = 'https://apis.google.com/js/plusone.js';  
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);  
          })();  
        </script>  
    </div>  
    <img src="images/googleplus.png" class="mygoogle" />  
</div>  

css:
.googleplus {  
position:relative;  
/* - use this to position your share icon on your page -  */  
}  
.googlehider {  
opacity:0;  
height:30px;  
width:30px;  
position:absolute;  
top:0;  
left:0;  
z-index:3;  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
filter:alpha(opacity=0);  
}  
.mygoogle {  
position:absolute;  
top:0;  
left:0;  
z-index:2;  
margin-left:6px;  
}

如果您有一个静态图像，但我的鼠标悬停效果很好，所以我试图从这个例子http://api.jquery.com/hover/中实现以下内容，以便在多个div中启用多个悬停效果，这些效果不起作用 - 是什么我做错了？我在下面提到facebook，因为我正试图在google +和facebook按钮上实现

<script>
$('div.facebookhider').hover(
function () {
$('div.myfacebook').addClass(".facebookhover"); 
}, 
function () {
$('div.myfacebook').removeClass(".facebookhover"); 
}
);
</script>

<div class="facebookshare">
<!-- Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    <div class="facebookhider">  
        <div class="fb-like" data-href="mywebsite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div> 
    </div>
    <div class="myfacebook"><li class="facebook"><a>Facebook</a></li></div>
</div>

Answer 1

您没有id facebookhider或myfacebook的任何元素。试试这个：

<script>
$(".facebookhider").hover(
function () {
$('.myfacebook').addClass("facebookhover"); 
}, 
function () {
$('.myfacebook').removeClass("facebookhover"); 
}
);
</script>

或者只使用CSS

jsFiddle Example

.social-links .facebookshare .facebookhider:hover + div li a {
    background-position: 0 0;
}
.social-links .googleplus .googlehider:hover + li a {
    background-position: 0 0;
}

将悬停效果应用于2个div

1 个答案:

或者只使用CSS