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 で複数のホバー効果を有効にしようとしました作業中 - 私は何を間違っていますか? google+ と facebook ボタンに実装しようとしているので、以下で 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

またはidを含む要素がありません。代わりにこれを試してください：facebookhidermyfacebook

<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 に答える