Question

中断编码是一个mf，但这是我的事。

我知道这与位置属性或z索引有关，这是我的猜测。

但是，当我将鼠标悬停在我的一个图标上时，希拉里的图像移动到其他地方。

如果有什么东西可以说明并解释我做错了什么，那就太棒了。

#wrapper {
	height: 900px;
	width:  900px;
	border: solid black;
    margin-left: auto;
    margin-right: auto;
}
body {
	background-color: #f1f1f1
}
#democraticon {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 100px 80px;
   background-repeat: no-repeat;
   width: 100px;
   height: 80px;
   float: right;
   margin-top: 387px;
   margin-right: 320px;
 }
 #democraticon:hover {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 150px 120px;
   background-repeat: no-repeat;
   width: 150px;
   height: 120px;

 }

 .republicanicon {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 100px 60px;
   width: 100px;
   height: 60px;
   float: left;
   margin-top: 400px;
   margin-left: 320px;
 }
 .republicanicon:hover {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 150px 100px;
   background-repeat: no-repeat;
   width: 150px;
   height: 100px;

}
#hillary {
width:40px;
height:40px;

<DOCTYPE html>
<html>
<head>
	<title>2016 Election</title>
</head>
<body>
<div id="wrapper">
<div id="democraticon"></div>
<div class="republicanicon"></div>
<img id="Hillary" src=http://s1.evcdn.com/images/block/I0-001/015/724/220-8.jpeg_/hillary-clinton-20.jpeg/>
</div>

</body>
</html>

Answer 1

#democraticon和.republicanicon是浮动元素，一个是右边，一个是左边。

作为<img>元素，#Hillary元素是内联元素。

没有悬停，#democraticon和.republicanicon都处于同一个高度，因此#Hillary会进入下一行，因为在该行上没有空格。当您将鼠标悬停在#democraticon或.republicanicon上时，它们会变得更高并向下延伸，但只会向其中一个延伸。因此左浮动#democraticon右侧现在在同一基线上有一些空间。 #Hillary（作为内联元素）现在放在该行上。

要解决此问题，请将#Hillary放入<div>标记（这是一个块元素）并为其指定clear: both。此外，使悬停元素与未悬停版本的高度相同，以避免#Hillary元素的垂直移动：

#wrapper {
	height: 900px;
	width:  900px;
	border: solid black;
    margin-left: auto;
    margin-right: auto;
}
body {
	background-color: #f1f1f1
}
#democraticon {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 100px 80px;
   background-repeat: no-repeat;
   width: 100px;
   height: 120px;
   float: right;
   margin-top: 387px;
   margin-right: 320px;
 }
 #democraticon:hover {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 150px 120px;
   background-repeat: no-repeat;
   width: 150px;
   height: 120px;

 }

 .republicanicon {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 100px 60px;
   background-repeat: no-repeat;
   width: 100px;
   height: 100px;
   float: left;
   margin-top: 400px;
   margin-left: 320px;
 }
 .republicanicon:hover {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 150px 100px;
   background-repeat: no-repeat;
   width: 150px;
   height: 100px;

}
#hillarywrapper {
  clear: both;
}
#hillary {
  width:40px;
  height:40px;
}

<DOCTYPE html>
<html>
<head>
	<title>2016 Election</title>
</head>
<body>
<div id="wrapper">
<div id="democraticon"></div>
<div class="republicanicon"></div>
  <div id="hillarywrapper"> 
<img id="Hillary" src="http://s1.evcdn.com/images/block/I0-001/015/724/220-8.jpeg_/hillary-clinton-20.jpeg/">
    </div>
</div>

</body>
</html>

激活图像悬停时，其他图像会变得混乱

1 个答案: