匿名質問者

マウスオーバー時の矢印

http://p.tl/fPbF

こちらのサイトを制作しているのですが、「特別連載・presents」にあるスクロールするバナーの部分に、マウスを乗せると矢印が出るのですが、これをマウスを載せなくても表示したいです。
矢印周りのCSSを調べたのですが、それらしきものがなく詰まっています。
どうすれば常に表示できるでしょうか。
またもしよろしければどういった理屈でマウスオーバー時に表示がされているのか知りたいです。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:
  • 終了:2013/10/23 13:50:45

回答1件)

匿名回答1号 No.1

(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"にスタイルを適用

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません