私はhtmlとcssを使い、いくつかのことを学びます。ホバー上のコンテナの下に余分なボックスが表示されます
私が移動する前に、問題を示すjfiddle(原則として)を示します。
現在、私はこれ持っている:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200" rel="stylesheet">
<link rel=stylesheet type="text/css" href="css/index.css">
</head>
<body>
<div class="logo">
<a>
<img src="images/LogoWhiteSmall.png" alt="Hardnose Logo" target="_blank">
</a>
</div>
<div class="message">Swimming your way</div>
</body>
</html>
を、これは(そのことについて申し訳ありません実際にSCSS)CSSコードです:
@import 'fontsAndColors';
/* Setting frame */
* {
height: 100%;
width: 100%;
margin: 0;
font-family: $main_font;
}
body {
background: $hn_green;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, $hn_green, $hn_blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, $hn_green, $hn_blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, $hn_green, $hn_blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, $hn_green, $hn_blue);
/* Standard syntax (must be last) */
}
img {
height: auto;
width: auto;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
position: absolute;
opacity: 0.2;
z-index: 1;
}
.logo {
display: inline-block;
height: auto;
width: auto;
margin: auto;
:hover {
height: auto;
width: auto;
opacity: 1.0;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: all 0.5s ease;
}
}
.message {
font-size: .8em;
text-align: center;
color: $hn_white;
height: auto;
width: auto;
position: absolute;
bottom: 45%;
left: 0;
right: 0;
opacity: .2;
}
が今、問題はこれです:ときに私画像をホバリングして、私はただそれが飛び出したいと思う。それはすべて動作します。しかし、ホバリングしている間、私は小さなウィンドウセクションを作成するように見えます。だから、ロゴをホバリングすると、スクロールバーは少し前にスクロールできることを示しています(写真を参照)。これを引き起こしているすべてのアイデア?
ありがとうございます!
あなたはより良いjsfiddle上のインスタンスをご提供していました。 –
jsfiddleでは少しはっきりしていませんが、グラデーションが「再起動」する位置は少し狭く表示されます:[jsfiddle](https://jsfiddle.net/01poLwam/1/)グラデーションを変更して明らかです。それは私のナットを運転している底に小さな灰色のバーです。 – Inkidu616
おそらくあなたは言及された間違いを訂正していないでしょう。私にとってはうまくいくhttp://joxi.ru/nAyxpzkfY9BbG2 –