回答編集履歴
2
修正
answer
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
- マウスオーバーすると出てくるborderが丸くない。
|
|
1
|
-
`
|
|
2
|
+
`borderWidth`の値を変更。`10px`より小さくする。
|
|
3
|
+
- ボタンの中の文字が動いてしまう。
|
|
4
|
+
`button`クラスにかかっている`line-height`プロパティをコメントアウト。
|
|
5
|
+
|
|
2
6
|
```HTML
|
|
3
7
|
<!DOCTYPE html>
|
|
4
8
|
<html lang="ja">
|
|
@@ -9,7 +13,6 @@
|
|
|
9
13
|
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
|
|
10
14
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
|
|
11
15
|
<style>
|
|
12
|
-
|
|
13
16
|
body {
|
|
14
17
|
background: #ebc000;
|
|
15
18
|
}
|
|
@@ -18,7 +21,7 @@
|
|
|
18
21
|
width: 200px;
|
|
19
22
|
height: 70px;
|
|
20
23
|
text-align: center;
|
|
21
|
-
line-height: 70px;
|
|
24
|
+
/* line-height: 70px; */
|
|
22
25
|
border-radius: 10px;
|
|
23
26
|
border: 0 solid #ae5e9b;
|
|
24
27
|
background: #fff;
|
|
@@ -32,25 +35,21 @@
|
|
|
32
35
|
</style>
|
|
33
36
|
</head>
|
|
34
37
|
<body>
|
|
35
|
-
|
|
36
|
-
<
|
|
38
|
+
<button class="button">mouseover</button>
|
|
37
|
-
|
|
38
39
|
<script>
|
|
39
40
|
$(function () {
|
|
40
|
-
$(
|
|
41
|
+
$(".button")
|
|
41
|
-
.on(
|
|
42
|
+
.on("mouseover", function () {
|
|
42
43
|
$(this).stop(true).animate({
|
|
43
|
-
borderWidth:
|
|
44
|
+
borderWidth: "8px",
|
|
44
|
-
borderRadius: "15px",//ここを追加。
|
|
45
|
-
color:
|
|
45
|
+
color: "#ae5e9b"
|
|
46
|
-
}, 300,
|
|
46
|
+
}, 300, "easeOutSine");
|
|
47
47
|
})
|
|
48
|
-
.on(
|
|
48
|
+
.on("mouseout", function () {
|
|
49
49
|
$(this).stop(true).animate({
|
|
50
|
-
borderWidth:
|
|
50
|
+
borderWidth: "0px",
|
|
51
|
-
borderRadius: "10px",//ここを追加。
|
|
52
|
-
color:
|
|
51
|
+
color: "#ebc000"
|
|
53
|
-
}, 300,
|
|
52
|
+
}, 300, "easeOutSine");
|
|
54
53
|
});
|
|
55
54
|
});
|
|
56
55
|
</script>
|
1
修正
answer
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
.on('mouseout', function () {
|
|
49
49
|
$(this).stop(true).animate({
|
|
50
50
|
borderWidth: '',
|
|
51
|
-
borderRadius: "",//ここを追加。
|
|
51
|
+
borderRadius: "10px",//ここを追加。
|
|
52
52
|
color: '#ebc000'
|
|
53
53
|
}, 300, 'easeOutSine');
|
|
54
54
|
});
|