Fatal编程技术网
  • html/
  • Html 悬停时容器下会出现额外的框

Html 悬停时容器下会出现额外的框

html css sass

Html 悬停时容器下会出现额外的框,html,css,sass,Html,Css,Sass,我在摆弄html和css，试图学习一些东西 在我继续之前，这里有一个例子说明了问题（在原理上） 目前，我有以下几点： <!doctype html> <html> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200" rel="stylesheet"> <

我在摆弄html和css，试图学习一些东西

在我继续之前，这里有一个例子说明了问题（在原理上）

目前，我有以下几点：

<!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>
现在，问题是：当我悬停图像时，我只希望它弹出。这一切都有效。但是，在悬停时，我似乎在下面创建了一个小窗口部分。所以，当鼠标悬停在徽标上时，滚动条显示我可以向下滚动一点（见图），而以前我不能。你知道这是什么原因吗

谢谢

第一个错误是 第二个-在此处添加垂直对齐：顶部


* {
身高：100%；
宽度：100%；
保证金：0；
字体系列：“源Sans Pro”，无衬线；}
/*第28行，/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
身体{
背景：#aaa；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（左上，#aaa，#000）；
/*适用于Safari 5.1至6.0*/
背景：-o-线性梯度（右下角，#aaa，#000）；
/*歌剧11.1至12.0*/
背景：-moz线性梯度（右下角，#aaa，#000）；
/*适用于Firefox 3.6至15*/
背景：线性梯度（至右下角，#aaa，#000）；
/*标准语法（必须是最后一个）*/}
/*第41行，/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
img{
身高：50%；
宽度：50%；
保证金：自动；
左：0；
排名：0；
右：0；
底部：0；
位置：绝对位置；
不透明度：0.2；
z-索引：1；}
/*第54行，/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
.标志{
显示：内联块；
保证金：自动；
垂直对齐：顶部；
}
/*第59行/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
.徽标：悬停{
不透明度：1.0；
-webkit转换：比例（1.1）；
-ms变换：比例（1.1）；
转换：比例（1.1）；
转换：所有0.5s轻松；}
/*第70行，/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
.留言{
字体大小：.8em；
文本对齐：居中；
颜色：#ffffff；
高度：自动；
宽度：自动；
位置：绝对位置；
底部：45%；
左：0；
右：0；
不透明度：.2；}
尝试添加
溢出：隐藏
到
主体
元素，或者容器元素将是什么。这为我解决了JSFIDLE中的问题。

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


1） 
img
已经定义了页面的大小，因为CSS规则已经指定了这一点
2） 当激活
.logo:hover
时，它会影响
img
的大小，从而影响页面的大小（显示额外高度=>垂直滚动条）


我这样解决了这个问题：
1） 
img
的CSS规则已移动到其父元素
a
元素
2） 
.logo:hover
的CSS规则已更新，因此
scale（1.1）
功能仅影响其子项
img


外部演示： 

*{
身高：100%；
宽度：100%；
保证金：0；
字体系列：“源Sans Pro”，无衬线；}
/*第28行，/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
身体{
背景：#aaa；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（左上，#aaa，#000）；
/*适用于Safari 5.1至6.0*/
背景：-o-线性梯度（右下角，#aaa，#000）；
/*歌剧11.1至12.0*/
背景：-moz线性梯度（右下角，#aaa，#000）；
/*适用于Firefox 3.6至15*/
背景：线性梯度（至右下角，#aaa，#000）；
/*标准语法（必须是最后一个）*/}
/*第41行，/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
a{
显示：块；
身高：50%；
宽度：50%；
保证金：自动；
左：0；
排名：0；
右：0；
底部：0；
位置：绝对位置；
不透明度：0.2；
z-索引：1；}
/*第54行，/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
.标志{
显示：内联块；
边距：自动；}
/*第59行/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
.徽标：悬停img{
不透明度：1.0；
-webkit转换：比例（1.1）；
-ms变换：比例（1.1）；
转换：比例（1.1）；
转换：所有0.5s轻松；}
/*第70行，/Users/Inkidu/Documents/Hardnose/Website/v2.0/css/index.scss*/
.留言{
字体大小：.8em；
文本对齐：居中；
颜色：#ffffff；
高度：自动；
宽度：自动；
位置：绝对位置；
底部：45%；
左：0；
右：0；
不透明度：.2；}
您最好向我们提供jsfiddle上的实例。在jsfiddle中有点不太清晰，但您可以看到下面渐变“重新启动”的一小部分：我更改了渐变以使其更清晰。底部的灰色小条让我抓狂。可能你还没有纠正前面提到的错误。对我来说效果很好，不过我用你的JFIDLE来截图。我在旅行，也许这与此有关？谢谢你的回复！我注意到我实际上复制了我的SCSS代码，所以如果这是你的意思，那可能不是一个错误（第一个）。至于你提到的第二个错误，这个问题还没有解决（实际上在你的jfiddle中看起来更糟）。如果你将笑脸悬停并滚动，你会看到下面出现一个很大的部分：/你是认真的吗？请再检查一遍。它应该能正常工作。是的，对不起，伙计。这是我在你的JFIDLE上看到的屏幕截图，当我悬停并向下滚动时。可能你还没有纠正前面提到的错误。对我来说，它工作得很好，joxi.ru/nAyxpzkfY9BbG2YES！将其添加到.logo容器为我修复了它。谢谢大家这不是个好决定。因为您禁用了身体的永久滚动。尝试添加内容，你就会看到结果。我明白你的意思。在这种情况下，此页将显示为n 
@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;
}

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