1

嗨，我现在正在扯头发，我在网上找到了这个脚本，它使我能够使用自己的 google+ 按钮而不是他们丑陋的按钮

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>
4

1 回答 1

2

您没有任何带有idoffacebookhider或的元素myfacebook。试试这个：

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

或者只使用 CSS

jsFiddle 示例

.social-links .facebookshare .facebookhider:hover + div li a {
    background-position: 0 0;
}
.social-links .googleplus .googlehider:hover + li a {
    background-position: 0 0;
}
于 2012-05-30T19:52:17.213 回答