マウスオーバーすると出てくるborderが丸くない

###わからないことと
jQuery最高の教科書という本でjqueryを勉強していて、本に書いてあるボタンを自分で作ろうとしましたが、
うまくできませんでした。

・マウスオーバーすると出てくるborderが丸くない。
・ボタンの中の文字が動いてしまう。

jQueryやcssは本当に苦手で、初歩的な質問ですが、回答お願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <style>

    body {
      background: #ebc000;
    }

    .button {
      width: 200px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      border-radius: 10px;
      border: 0px solid #ae5e9b;
      background: #fff;
      color: #ebc000;
      box-sizing: border-box;
    }
    .button:hover {
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="button">mouseover</div>

  <script>
   $(function() {
        $('.button')
         .on('mouseover', function() {
           $(this).stop(true).animate({
             borderWidth: '12px',
             color: '#ae5e9b'
           },300, 'easeOutSine');
         })
         .on('mouseout', function() {
           $(this).stop(true).animate({
             borderWidth: '',
             color: '#ebc000'
           },300, 'easeOutSine');
         });
   });
  </script>
</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

マウスオーバーすると出てくるborderが丸くない。

borderWidthの値を変更。10pxより小さくする。

ボタンの中の文字が動いてしまう。

buttonクラスにかかっているline-heightプロパティをコメントアウト。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>jQuery</title>
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
7    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
9    <style>
10        body {
11            background: #ebc000;
12        }
13
14        .button {
15            width: 200px;
16            height: 70px;
17            text-align: center;
18            /* line-height: 70px; */
19            border-radius: 10px;
20            border: 0 solid #ae5e9b;
21            background: #fff;
22            color: #ebc000;
23            box-sizing: border-box;
24        }
25
26        .button:hover {
27            cursor: pointer;
28        }
29    </style>
30</head>
31<body>
32<button class="button">mouseover</button>
33<script>
34    $(function () {
35        $(".button")
36            .on("mouseover", function () {
37                $(this).stop(true).animate({
38                    borderWidth: "8px",
39                    color: "#ae5e9b"
40                }, 300, "easeOutSine");
41            })
42            .on("mouseout", function () {
43                $(this).stop(true).animate({
44                    borderWidth: "0px",
45                    color: "#ebc000"
46                }, 300, "easeOutSine");
47            });
48    });
49</script>
50</body>
51</html>

投稿2017/03/30 01:37

編集2017/03/30 02:04

s8_chu

総合スコア14731

miiichat

2017/03/30 03:25

回答ありがとうございます！出来ました！

行動規範の内容に同意します

CSSだけでできますよ。

HTML
1<div class="button">mouseover</div>

CSS
1.button {
2	width: 200px;
3	height: 70px;
4	text-align: center;
5	line-height: 70px;
6	border-radius: 10px;
7	border: 0px solid #ae5e9b;
8	background: #fff;
9	color: #ebc000;
10	box-sizing: border-box;
11	-webkit-transition: all 300ms cubic-bezier(.47, 0, .745, .715);
12	        transition: all 300ms cubic-bezier(.47, 0, .745, .715);
13}
14.button:hover {
15	cursor: pointer;
16	line-height: 46px;
17	border-width: 12px;
18	border-radius: 22px;
19	color: #ae5e9b;
20}

HTML
1<div class="button2">mouseover</div>

↑ 質問文のコードに準拠。heightが動くので文字がゆれる。
↓ 改善案。

CSS
1.button2 {
2	width: 200px;
3	height: 70px;
4	text-align: center;
5	line-height: 70px;
6	border-radius: 10px;
7	background: #fff;
8	color: #ebc000;
9	box-sizing: border-box;
10	-webkit-transition: all 300ms cubic-bezier(.47, 0, .745, .715);
11	        transition: all 300ms cubic-bezier(.47, 0, .745, .715);
12	cursor: pointer;
13	position: relative;
14	margin-top: 1em;
15}
16.button2::after {
17	border: 0px solid #ae5e9b;
18	position: absolute;
19	content: "";
20	left: 0;
21	right: 0;
22	top: 0;
23	bottom: 0;
24	-webkit-transition: all 300ms cubic-bezier(.47, 0, .745, .715);
25	        transition: all 300ms cubic-bezier(.47, 0, .745, .715);
26}
27.button2:hover {
28	border-radius: 22px;
29	color: #ae5e9b;
30}
31.button2:hover::after {
32	border-width: 12px;
33	border-radius: 22px;
34}
35```**動くサンプル：**[https://jsfiddle.net/3z5d7L87/](https://jsfiddle.net/3z5d7L87/)
36
37---
38
39【Easing Function 早見表】
40[http://easings.net/ja#easeInSine](http://easings.net/ja#easeInSine)