イメージホバーがアクティブになったときに他のイメージが混乱する

ブレークオフコーディングはmfですが、ここに私のことがあります。イメージホバーがアクティブになったときに他のイメージが混乱する

私はこれが私の推測である位置のプロパティまたはzインデックスと関係があることを知っています。

しかし私がマウスオーバーしたとき、ヒラリーのイメージはどこか別の場所に移動します。

何かが私が間違っていることを伝えて説明することができたらすばらしいことになります。

#wrapper { 
 
\t height: 900px; 
 
\t width: 900px; 
 
\t border: solid black; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
body { 
 
\t 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> 
 
\t <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>

出典

2016-05-03 BlueHorse

が見えます。既に完全な解決策があるので、私の答えを削除する。がんばろう。 – timolawl

#democraticonと.republicanicon浮上要素、1つの右の一つ残っています。

<img>要素の場合、#Hillary要素はインライン要素です。

ホバーなしでは、#democraticonと.republicaniconの両方が同じ高さにあるため、#Hillaryはその行にそれ以上スペースがないため、次の行に入ります。 #democraticonまたは.republicaniconにカーソルを合わせると、それらは高くなり、下に広がりますが、そのうちの1つのみになります。したがって、左浮動小数点の#democraticonの右に、同じベースライン上にいくらかのスペースがあります。 #Hillary（インライン要素として）がその行に置かれます。

これを修正するには、タグ（ブロック要素）に#Hillaryを置き、clear: bothを割り当てます。また、ホバー要素を作る#Hillary要素の垂直方向の移動を避けるために、彼らの非推移したバージョンと同じ高さ：@Johannesはあなたがカバーしているよう

#wrapper { 
 
\t height: 900px; 
 
\t width: 900px; 
 
\t border: solid black; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
body { 
 
\t 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> 
 
\t <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>

出典

2016-05-03 23:48:48 Johannes

イメージホバーがアクティブになったときに他のイメージが混乱する

答えて

関連する問題