Question

我正在摆弄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>

这是CSS代码（实际上是SCSS，对不起）：

@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 谢谢！

Answer 1

第一个错误是http://joxi.ru/EA4zdNWIwXz0Gm 第二个 - 在这里添加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; }

Answer 2

尝试将overflow: hidden;添加到body元素，或者容器元素的任何内容。这为我解决了JSFiddle中的问题。

Answer 3

最大的问题是关于img元素：

1）img已经定义了页面的大小，因为CSS规则已经指定了这个
2）当.logo:hover被激活时，它会影响img的大小，这会影响页面的大小（额外的高度=＆gt;垂直滚动条出现）

<小时/> 我这样解决了问题：
1）img的CSS规则已移至其父a元素
2）.logo:hover的CSS规则已更新，以便scale(1.1)函数仅影响其子项，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>

悬停时容器下方会显示额外的框

3 个答案: