質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2898閲覧

リンクにマウスオーバー時のborderの表示方法について教えてください

Yossyu

総合スコア8

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/04/16 15:04

編集2017/04/16 15:56

リンクにマウスオーバーをした時の borderのエフェクトについて
なかなか再現できず困っています。

##やりたいこと

リンクにマウスオーバーした時に左下と右上から

左下は 上と右に向かってborderが伸びる
右上は 下と左に向かってborderが伸びる

最終的にborderで囲われた形になる

マウスオーバーが外れたら上記のように表示されたborderが非表示になる

##コード

html

1 <ul> 2 <li> 3 <a href="#" class="button"> 4 <img src="/image/xxxxx.jpg"> 5 </a> 6 </li> 7 <li> 8 <a href="#" class="button"> 9 <img src="/image/xxxxx.jpg"> 10 </a> 11 </li> 12 <li> 13 <a href="#" class="button"> 14 <img src="/image/xxxxx.jpg"> 15 </a> 16 </li> 17 <li> 18 <a href="#" class="button"> 19 <img src="/image/xxxxx.jpg"> 20 </a> 21 </li> 22 </ul>

css

1 * { 2 padding: 0; 3 margin: 0; 4 } 5 ul { 6 display: -webkit-flex; 7 display: -moz-flex; 8 display: -ms-flex; 9 display: -o-flex; 10 display: flex; 11 -webkit-flex-wrap: wrap; 12 -moz-flex-wrap: wrap; 13 -ms-flex-wrap: wrap; 14 -o-flex-wrap: wrap; 15 flex-wrap: wrap; 16 } 17 li { 18 width: 300px; 19 } 20 a { 21 overflow: hidden; 22 display: block; 23 position: relative; 24 } 25 a.button::before, 26 a.button::after { 27 position: absolute; 28 top: 0; 29 right: 0; 30 bottom: 0; 31 left: 0; 32 z-index: 2; 33 content: ''; 34 -webkit-transition: all .5s; 35 transition: all .5s; 36 } 37 38 a.button::before { 39 border-top: 20px solid #196ea9; 40 border-bottom: 20px solid #196ea9; 41 -webkit-transform: scale(0, 1); 42 -ms-transform: scale(0, 1); 43 transform: scale(0, 1); 44 } 45 46 a.button::after { 47 border-right: 20px solid #196ea9; 48 border-left: 20px solid #196ea9; 49 -webkit-transform: scale(1, 0); 50 -ms-transform: scale(1, 0); 51 transform: scale(1, 0); 52 } 53 54 a.button:hover::before, 55 a.button:hover::after { 56 -webkit-transform: scale(1); 57 -ms-transform: scale(1); 58 transform: scale(1); 59 }

上記の内容でマウスオーバー時に
上下左右のborderがそれぞれ真ん中から上下・左右に表示されるところまではできたのですが
表題の通りの動作にしたいです。

##参考サイト
http://www.aim-info.co.jp/recruit/

各人物にマウスオーバーした時に MOREボタンが表示されますが
このMOREボタンにマウスオーバーした時のborderの挙動がイメージに近いです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/04/16 15:23

ご自身で書かれたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
Yossyu

2017/04/16 15:40

ありがとうございます。コードを追記させていただきました。
kei344

2017/04/16 15:41

a.buttonにはCSSを使っていないのでしょうか?
Yossyu

2017/04/16 15:58

すみません、全体的なコードを追記してみました。画像が並んでいて画像にマウスオーバーすると表題のような動きで画像の周りにborderが表示されるような感じです。
guest

回答1

0

ベストアンサー

例えば。

CSS

1 * { 2 padding: 0; 3 margin: 0; 4 } 5 ul { 6 display: -webkit-flex; 7 display: -moz-flex; 8 display: -ms-flex; 9 display: -o-flex; 10 display: flex; 11 -webkit-flex-wrap: wrap; 12 -moz-flex-wrap: wrap; 13 -ms-flex-wrap: wrap; 14 -o-flex-wrap: wrap; 15 flex-wrap: wrap; 16 } 17 li { 18 width: 300px; 19 } 20 a { 21 overflow: hidden; 22 display: block; 23 position: relative; 24 box-sizing: border-box; 25 } 26 a.button::before, 27 a.button::after { 28 position: absolute; 29 z-index: 2; 30 content: ''; 31 -webkit-transition: width .5s ease-out 1s, height .5s ease-out 1s, opacity 2s; 32 transition: width .5s ease-out 1s, height .5s ease-out 1s, opacity 2s; 33 height: 0; 34 width: 0; 35 opacity: 0; 36 } 37 38 a.button::before { 39 top: 0; 40 left: 0; 41 border-top: 20px solid #196ea9; 42 border-left: 20px solid #196ea9; 43 } 44 45 a.button::after { 46 right: 0; 47 bottom: 0; 48 border-right: 20px solid #196ea9; 49 border-bottom: 20px solid #196ea9; 50 } 51 52 a.button:hover::before, 53 a.button:hover::after { 54 -webkit-transition: width .5s, height .5s, opacity 1s; 55 transition: width .5s, height .5s, opacity 1s; 56 height: 100%; 57 width: 100%; 58 opacity: 1; 59 } 60 61```**動くサンプル:**[https://jsfiddle.net/9wpgeLaa/](https://jsfiddle.net/9wpgeLaa/)

投稿2017/04/16 16:53

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yossyu

2017/04/16 22:49

ありがとうございます! すごくイメージに近い形になりました。 マウスオーバー時にborderが動いた際、左下と右上に濃い■の幅が残ってしまうのですが これは仕様でしたでしょうか。(どこかでそのような記事をみた記憶もあります・・・) マウスを外した時に、薄く遅れてマウスオーバー時の逆の動作で戻っていく感じになっているのですが 外した時は、borderがパッと消えるということは可能なのでしょうか。 質問ばかりで恐縮です。よろしくお願いいたします。
Yossyu

2017/04/17 00:16

ありがとうございます!! イメージ通りの動きになりました。本当に助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問