先日紹介した「お好き玉」ですが、アクセス数が多いはずなのにまだ2014に達していません!
アクセスが足りないのか、みんな諦めるのか分かりませんが2014を超したほうが楽しいので、少しだけヒント載せておきます!
素人でも、これをきっかけに少しだけWebエンジニアっぽいことに挑戦できたら楽しいよね:)
逃げる「イイネ!!」が押せない仕組み
このFBイイネが押せない理由は2つあります。
- イイネボタンの上にCSSでマスクがかかっている
- カーソルに合わせてボタンが動く
この両方を解除しないとボタンは押せません。
Google ChromeのDeveloper Toolは必須ですヨ:)
1.イイネボタンの上にCSSでマスクがかかっている
z-indexの仕業かと思ったら、こんな方法もあるんですねぇ。感心。
1 2 3 4 5 6 7 8 9 10 |
|
Facebookのイイネボタンのidが#iine
で、その直後に疑似要素:after
が同じサイズでかぶさっています。なので、どんなに頑張ってもボタンは押せません。
この疑似要素を消すか、widthを0にしてしまえばボタンは押せますね。Developer Toolの出番やで!
2. カーソルに合わせてボタンが動く
JavaScriptを見てみると、mouseover
とtouchstart
のタイミングで位置を移動させているのが分かります。
1 2 3 4 5 6 7 8 9 10 11 |
|
なので、このeventを解除してやれば動かなくなります(・∀・) on
の逆をすればいいのです
まとめ
解説しましたが、つまるところ#iine
にまつわるものを解除してやればいいので、Developer Toolを開いて、ちょめっとすれば一瞬ですネヾ(*´∀`*)ノ
さぁ「お好き玉」へ挑戦してみようー!