2017-02-13 11 views
1

私は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; 
} 

が今、問題はこれです:ときに私画像をホバリングして、私はただそれが飛び出したいと思う。それはすべて動作します。しかし、ホバリングしている間、私は小さなウィンドウセクションを作成するように見えます。だから、ロゴをホバリングすると、スクロールバーは少し前にスクロールできることを示しています(写真を参照)。これを引き起こしているすべてのアイデア?

Problem ありがとうございます!

+0

あなたはより良いjsfiddle上のインスタンスをご提供していました。 –

+0

jsfiddleでは少しはっきりしていませんが、グラデーションが「再起動」する位置は少し狭く表示されます:[jsfiddle](https://jsfiddle.net/01poLwam/1/)グラデーションを変更して明らかです。それは私のナットを運転している底に小さな灰色のバーです。 – Inkidu616

+0

おそらくあなたは言及された間違いを訂正していないでしょう。私にとってはうまくいくhttp://joxi.ru/nAyxpzkfY9BbG2 –

答えて

1

body要素にoverflow: hidden;を追加してみてください、またはコンテナ要素になります何でも。 JSFiddleの問題を解決しました。

+0

はい!それを.logoコンテナに追加すると、私のために修正されました。みんな、ありがとう! – Inkidu616

+1

)それは良い決断ではありません。体のために永遠にスクロールを無効にするためです。コンテンツを追加しようとすると、何が起こるかがわかります。 –

+0

私はあなたが言っていることを得る。この場合、このページは決して実際のメインページへのポータルではないので、私のニーズに合っています。しかし、入力をありがとう。 – Inkidu616

1

最初の間違いはhttp://joxi.ru/EA4zdNWIwXz0Gm 2番目のものはここに追加してくださいvertical-align:top; http://joxi.ru/DmBLgXyuwqO6yA

https://jsfiddle.net/01poLwam/2/

<div class="logo"> 
     <a> 
      <img src="http://images.clipartbro.com/33/smiley-face-symbols-33397.png" alt="Hardnose Logo" target="_blank"> 
     </a> 
    </div> 

* { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    font-family: "Source Sans Pro", sans-serif; } 

/* line 28, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
body { 
    background: #aaa; 
    /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(left top, #aaa, #000); 
    /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(bottom right, #aaa, #000); 
    /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(bottom right, #aaa, #000); 
    /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to bottom right, #aaa, #000); 
    /* Standard syntax (must be last) */ } 

/* line 41, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
img { 
    height: 50%; 
    width: 50%; 
    margin: auto; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    position: absolute; 
    opacity: 0.2; 
    z-index: 1; } 

/* line 54, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
.logo { 
    display: inline-block; 
    margin: auto; 
    vertical-align: top; 
    } 
    /* line 59, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
    .logo:hover { 
    opacity: 1.0; 
    -webkit-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    transform: scale(1.1); 
    transition: all 0.5s ease; } 

/* line 70, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
.message { 
    font-size: .8em; 
    text-align: center; 
    color: #ffffff; 
    height: auto; 
    width: auto; 
    position: absolute; 
    bottom: 45%; 
    left: 0; 
    right: 0; 
    opacity: .2; } 
+0

お返事ありがとうございます!私は実際に自分のSCSSコードをコピーしたことに気づいたので、もしそれがあなたが意味することは、おそらくエラー(最初のもの)ではないでしょう。あなたが言及した2番目の間違いについては、問題はまだ解決されていません(実際にはあなたのjfiddleでは悪化しています)。スマイリーをスクロールしてスクロールすると、下に大きなセクションが表示されます。/ – Inkidu616

+0

あなたは真剣ですか?もう一度https://jsfiddle.net/01poLwam/2/で確認してください。それは正しく動作するはずです。 –

+0

うん、すみません。これは、あなたのjfiddleで、私がホバーしてスクロールするときに見ているもののスクリーンショットです。 http://imgur.com/hBRN4Z7 – Inkidu616

0

大きな問題がimg要素に関するました:CSSルールが指定されているので、


1)imgは、ページのサイズを定義しているが、この
2).logo:hoverが活性化されたとき、それが影響を受けますsizeofページに影響を与えimgの大きさ、(余分な高さ=>垂直スクロールバーが表示されます)



私はこの問題をこのように解決:
1) imgためのCSSルールは、その親に移動されている scale(1.1)機能が影響を与えるように、 .logo:hoverため a要素
2)CSSルールが更新されているだけで、それは子供の、 img



外部デモ:https://jsfiddle.net/01poLwam/4/



* { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    font-family: "Source Sans Pro", sans-serif; } 
 

 
/* line 28, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
 
body { 
 
    background: #aaa; 
 
    /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(left top, #aaa, #000); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(bottom right, #aaa, #000); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(bottom right, #aaa, #000); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(to bottom right, #aaa, #000); 
 
    /* Standard syntax (must be last) */ } 
 

 
/* line 41, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
 
a { 
 
    display: block; 
 
    height: 50%; 
 
    width: 50%; 
 
    margin: auto; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    position: absolute; 
 
    opacity: 0.2; 
 
    z-index: 1; } 
 

 
/* line 54, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
 
.logo { 
 
    display: inline-block; 
 
    margin: auto; } 
 
    /* line 59, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
 
    .logo :hover img{ 
 
    opacity: 1.0; 
 
    -webkit-transform: scale(1.1); 
 
    -ms-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
    transition: all 0.5s ease; } 
 

 
/* line 70, /Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss */ 
 
.message { 
 
    font-size: .8em; 
 
    text-align: center; 
 
    color: #ffffff; 
 
    height: auto; 
 
    width: auto; 
 
    position: absolute; 
 
    bottom: 45%; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: .2; }
<div class="logo"> 
 
     <a> 
 
      <img src="http://images.clipartbro.com/33/smiley-face-symbols-33397.png" alt="Hardnose Logo" target="_blank"> 
 
     </a> 
 
    </div>

関連する問題