Q&A
「boxにhoverした時浮き上がらせるようにしたいです。」とのことですが、
https://jin-demo.jp/demo-4/
を拝見したところ、いい感じに浮き上がっているように見えました。
どういった問題があるのでしょうか？
html
css
body ul {
list-style: none;
}
body a {
text-decoration: none;
color: black;
}
.inner{
overflow: hidden;
}
header {
position: relative;
font-family: 'Noto Sans Japanese', sans-serif;
}
.header-ttl {
text-align: center;
font-size: 34px;
font-weight: 200;
}
.menu {
display: flex;
justify-content: center;
}
.menu ul {
display: flex;
margin: 20px;
}
.menu li {
margin: 0px 30px;
}
.green {
color: #9ACC1D;
}
#left-side {
position: relative;
font-family: 'Noto Sans Japanese', sans-serif;
width: 1000px;
}
.boxes {
display: flex;
position: relative;
left: 100px;
}
.boxes ul {
display: flex;
flex-wrap: wrap;
}
.boxes img {
width: 368px;
height: 207px;
position: relative;
z-index: 90;
}
.background-green {
font-size: 12px;
background-color: #9ACC1D;
width: 80px;
border-radius: 10px;
color: white;
padding: 2px 4px;
position: relative;
top: 45px;
left: 10px;
z-index: 91;
}
.box-ttl {
font-size: 19px;
position: relative;
left: 25px;
}
.date {
font-size: 12px;
color: #898989;
position: relative;
left: 280px;
margin-bottom: 0;
}
.date2 {
position: relative;
top: 30px;
font-size: 12px;
color: #898989;
left: 280px;
margin-bottom: 0;
}
.boxes li {
border: 1px solid #E5E5E5;
width: 368px;
height: 360px;
margin: 10px;
}
.boxes a {
position: relative;
top: -46px;
}
.btm-btn {
position: relative;
left: 480px;
top: -10px;
}
.btm-btn a {
margin: 10px;
height: 20px;
position: relative;
top: 20px;
z-index: 1002;
}
.btn-1 {
background-color: black;
color: white;
padding: 10px;
border-radius: 100%;
margin-bottom: 0;
}
.btn-2 {
color: #AAA;
border: 1px solid #AAA;
padding: 10px;
border-radius: 50%;
height: 10px;
top: 20px;
}
.btn-2:hover {
background-color: #888;
}
jquery
前提・実現したいこと
1.menuにhoverした時にanimation(追いかけてくる)をしたいです。
2.boxにhoverした時浮き上がらせるようにしたいです。
3.btm-btnの下が見切れてしまうのですがどうすればいいですか？
ここに質問の内容を詳しく書いてください。
1についてはネットに書いてあることを当てはめました。
補足情報（FW/ツールのバージョンなど）
元のサイトURLはhttps://jin-demo.jp/demo-4/です。
よろしくお願いいたします！
元サイトのURLは https://teratail.com/help/question-tips#questionTips3-7 の [リンク] で [リンク先のタイトル](http...) に修正してください。
CSSコードは https://teratail.com/help/question-tips#questionTips3-7 の [コード] に修正してください。
CSS以下のマークダウンができておりませんので、質問編集して調整してください。
質問の2, 3についてはわかるのですが、1の「.menuにhoverした時にanimation(追いかけてくる)をしたいです」はどういうアニメーションをイメージしていますか？
もう少し説明やサンプルサイトなどがあると回答できると思います。
タイトルは質問の概要が分かるものに変更してください。
回答1件
0
ベストアンサー
元サイトを模写しているということですよね。
2.boxにhoverした時浮き上がらせるようにしたいです。
.boxes liを下記のように修正。
css
1.boxes li { 2 border: 1px solid #E5E5E5; 3 width: 368px; 4 height: 360px; 5 margin: 10px; 6 transition: all 0.3s; /*追加*/ 7} 8/*以下追加 ここから*/ 9.boxes li:hover { 10 transform: translateY(-3px); 11 box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.08); 12} 13/*ここまで*/
3.btm-btnの下が見切れてしまうのですがどうすればいいですか？
下記のように修正。
css
1.btm-btn { 2 position: relative; 3 left: 480px; 4/* top: -10px;*//*削除*/ 5} 6.btm-btn a { 7 display: inline-block; /*追加*/ 8 margin: 10px; 9 height: 20px; 10 position: relative; 11 /* top: 20px; *//*削除*/ 12 z-index: 1002; 13}
ただ、全体の幅を固定して、位置決めを left topでしている現状の設計はレスポンシプ対応ではないので、
レスポンシブレイアウトについての解説サイトやFlexboxについて学習して、一から設計しなおすべきと思います。
1.menuにhoverした時にanimation(追いかけてくる)をしたいです。
具体的にどうしたいのか不明確なのでこれはパス。
「追いかけてくる」と呈示されているjQueryから、下記のようなことかと推測。
html
1 <div class="menu"> 2 <ul> 3 <li><a class="current" href="#">HOME</a></li> 4 <li><a href="#">PROFILE</a></li> 5 <li><a href="#">SERVICE</a></li> 6 <li><a href="#">REVIEW</a></li> 7 <li><a href="#">CONTACT</a></li> 8 </ul> 9 <span></span> 10 </div>
css
1.menu { 2 display: flex; 3 justify-content: center; 4} 5.menu ul { 6 display: flex; 7 margin: 10px 20px; 8} 9.menu li{ 10 padding: 10px 30px; 11} 12.menu span { 13 position: absolute; 14 bottom: 0; 15 height: 3px; 16 background-color: black; 17}
js
1var menuCurrent = $('.menu .current'), 2 cssCurrent={ 3 width: menuCurrent.outerWidth(), 4 left: menuCurrent.position().left 5 }; 6$(window).on('load resize', function () { 7 $('.menu span').css({ 8 width: menuCurrent.outerWidth(), 9 left: menuCurrent.position().left 10 }); 11}); 12$('.menu li').hover( 13 function () { 14 $('.menu span').stop().animate({ 15 width: $(this).children().outerWidth(), 16 left: $(this).children().position().left 17 }, 'fast'); 18 }, 19 function () { 20 $('.menu span').stop().animate({ 21 width: menuCurrent.outerWidth(), 22 left: menuCurrent.position().left 23 }, 'fast'); 24 } 25);
投稿2020/02/15 03:53
編集2020/02/15 06:24総合スコア33699
あなたの回答
tips
プレビュー
