http://p.tl/fPbF
こちらのサイトを制作しているのですが、「特別連載・presents」にあるスクロールするバナーの部分に、マウスを乗せると矢印が出るのですが、これをマウスを載せなくても表示したいです。
矢印周りのCSSを調べたのですが、それらしきものがなく詰まっています。
どうすれば常に表示できるでしょうか。
またもしよろしければどういった理屈でマウスオーバー時に表示がされているのか知りたいです。
(1)マウスを載せなくても表示したい
flexslider.css の65行目と66行目にある.flexslider:hover の部分を削りとる
変更前
.flexslider:hover .flex-prev { background: url(../images/arrow1.png) no-repeat left; opacity: 0.7; left: 0px; } .flexslider:hover .flex-next { background: url(../images/arrow2.png) no-repeat right; opacity: 0.7; right: 0px; }
変更後
.flex-prev { background: url(../images/arrow1.png) no-repeat left; opacity: 0.7; left: 0px; } .flex-next { background: url(../images/arrow2.png) no-repeat right; opacity: 0.7; right: 0px; }
(2)理屈
変更前
.flexslider:hover .flex-prev { スタイル }
id="flexslider"にマウスオーパー時にid="flex-prev"にスタイルを適用
変更後
.flex-prev { スタイル }
id="flex-prev"にスタイルを適用
コメント(0件)