html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="practice10.css">
<script src="https://tsukigime-rider.com/js/jquery-3.1.1.min.js"></script>
<script src="https://tsukigime-rider.com/js/jquery-ui.js"></script>
<script src="https://tsukigime-rider.com/js/public/plugin/jquery.ui.touch-punch.min.js"></script>
<script src="https://tsukigime-rider.com/js/plugins/aos/aos.min.js"></script>
<script src="https://tsukigime-rider.com/js/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<title>practice10</title>
</head>
<body>
<header>
<div class="inner">
<div class="header-ttl"><a href="https://jin-demo.jp/demo-4/"><span class="green">JIN</span> Demo Site 4</a></div>
<div class="menu">
<ul>
<li><a class="current" href="https://jin-demo.jp/demo-4">HOME</a></li>
<li><a href="https://jin-demo.jp/demo-4">PROFILE</a></li>
<li><a href="https://jin-demo.jp/demo-4">SERVICE</a></li>
<li><a href="https://jin-demo.jp/demo-4">REVIEW</a></li>
<li><a href="https://jin-demo.jp/demo-4">CONTACT</a></li>
</ul>
<span></span>
</div>
</div>
</header>
<main>
<div id="left-side">
<div class="inner">
<div class="boxes">
<ul>
<li><a href="https://jin-demo.jp/demo-4/?p=3715"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/03/shutterstock_377522251-1280x720.jpg" alt="">
<p class="box-ttl">JINはデザインインポートに対応!自<br>分好みのデザインに「着せ替え」でき<br>る</p>
<p class="date">2月 27, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3711"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/03/shutterstock_279275555-1280x720.jpg" alt="">
<p class="box-ttl">この記事を書いた人|ライタープロフ<br>ィールを作成できる</p>
<p class="date2">2月 27, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3669"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/03/shutterstock_295702355-1280x720.jpg" alt="">
<p class="box-ttl">「コンテンツマガジン」でユーザーが<br>回遊しやすい記事リストへ!</p>
<p class="date2">1月 26, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3521"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/03/shutterstock_527675818-1280x720.jpg" alt="">
<p class="box-ttl">使いやすい「スマホフッターメニュ<br>ー」でユーザビリティを高めよう!</p>
<p class="date2">1月 11, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3518"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/03/shutterstock_471769004-1280x720.jpg" alt="">
<p class="box-ttl">カラーを自由自在に変更できる!CSS<br>がわからなくても使いこなせる!</p>
<p class="date2">1月 11, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3516"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/01/shutterstock_151174712-1280x720.jpg" alt="">
<p class="box-ttl">「インフィード広告機能」に対応!ブ<br>ログの収益化をさらに後押し</p>
<p class="date2">1月 11, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3514"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/03/shutterstock_285640730-1280x720.jpg" alt="">
<p class="box-ttl">会話のための「吹き出し」を標準搭<br>載!デザインバリエーションは30種類<br>以上!</p>
<p class="date">1月 11, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3508"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/01/shutterstock_288725276-1280x720.jpg" alt="">
<p class="box-ttl">JINは内部SEO対策済み!サイトの上<br>位表示を後押しします</p>
<p class="date2">1月 11, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3498"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2017/12/shutterstock_229543828-1280x720.jpg" alt="">
<p class="box-ttl">Google Analyticsなどを簡単に導入で<br>きる「HTMLタグ設定」</p>
<p class="date2">1月 11, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3489"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/01/shutterstock_224637184-1280x720.jpg" alt="">
<p class="box-ttl">重要記事を表示する「ピックアップ」<br>でユーザビリティを最大限に高めよ<br>う!</p>
<p class="date">1月 10, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3485"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2017/12/shutterstock_431592634-1280x720.jpg" alt="">
<p class="box-ttl">「広告管理」で管理画面から広告一元<br>管理!収益性と効率をアップしよう!</p>
<p class="date2">1月 10, 2018</p></a>
</li>
<li><a href="https://jin-demo.jp/demo-4/?p=3481"><p class="background-green">JINのデザイン</p>
<img src="https://jin-demo.jp/demo-4/wp-content/uploads/2018/03/shutterstock_252732910-1280x720.jpg" alt="">
<p class="box-ttl">CTA(注目エリア)を設置して収益ア<br>ップ!カテゴリ分けにも対応!</p>
<p class="date2">1月 10, 2018</p></a>
</li>
</ul>
</div>
<div class="btm-btn">
<a href="https://jin-demo.jp/demo-4/" class="btn-1">1</a>
<a href="https://jin-demo.jp/demo-4/?paged=2" class="btn-2">2</a>
</div>
</div>
</div>
</body>
</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
<script>
$(function() {
$('.menu span').css({
width: $('.menu .current').outerWidth(),
left: $('.menu .current').position().left
});
$('.menu a').mouseover(function(){
$('.menu span').stop().animate({
width: $(this).outerWidth(),
left: $(this).position().left}
,'fast');
});
});
</script>
前提・実現したいこと
1.menuにhoverした時にanimation(追いかけてくる)をしたいです。
2.boxにhoverした時浮き上がらせるようにしたいです。
3.btm-btnの下が見切れてしまうのですがどうすればいいですか?
ここに質問の内容を詳しく書いてください。
1についてはネットに書いてあることを当てはめました。
補足情報(FW/ツールのバージョンなど)
元のサイトURLはhttps://jin-demo.jp/demo-4/です。
よろしくお願いいたします!