懸停不工作，我不知道爲什麼

-1

嗨，我是一個試圖建立自己的網站的初學者。我有麻煩試圖位置的圖像和懸停性能賦予它，這裏的懸停不工作，我不知道爲什麼

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Tu est fis de pute</title> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
    <style> 
 
    div { 
 
     height: 30px; 
 
     width: 30px; 
 
     position: absolute; 
 
     top: 45%; 
 
     left: 25%; 
 
     -webkit-transition: width 2s, height 2s; 
 
     transition: width 2s, height 2s; 
 
    } 
 
    div:hover { 
 
     width: 40px; 
 
     height: 40px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <img src="logo.png" style="width:13%; position:absolute; top:11%; left:44.2%" /> 
 
    <div id="fbicon"> 
 
    <img src="icons/facebook.png" /> 
 
    </div> 
 
</body> 
 

 
</html>

我基本上是試圖把一個放大的效果，當鼠標懸停在圖標，同時將代碼我想要的圖標。任何幫助將不勝感激！謝謝！

來源

2017-02-14 Chester Cheng

工作得很好，我 - 看看這裏https://jsfiddle.net/19mr3vuk/ –

您可以使用scale放大懸停全格：

div { 
 
    height: 30px; 
 
    width: 30px; 
 
    position: absolute; 
 
    background: teal; 
 
    top: 45%; 
 
    left: 25%; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
div:hover { 
 
    transform: scale(1.3); 
 
}

<img src="logo.png" style="width:13%; position:absolute; top:11%; left:44.2%" /> 
 
<div id="fbicon"> 
 
    <img src="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg" /> 
 
</div>

來源

2017-02-14 07:07:48 Banzay

試試這個唯一的變化CSS底線：

HTML

<img src="logo.png" style="width:13%; position:absolute; top:11%; left:44.2%"/> 
<div id="fbicon"><img src="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg"/> </div>

CSS

div{ 
    height: 30px; 
    width: 30px; 
    position: absolute; 
    top: 45%; 
    left: 25%; 
    -webkit-transition: width 2s, height 2s; 
    transition: width 2s, height 2s; 
} 
div:hover{ 
    width: 40px; 
    height: 40px; 
} 
div img{width:100%; height:100%;}

來源

2017-02-14 07:11:35

見小提琴：https：//開頭的jsfiddle .net/s1ut87mo/ –

謝謝！它完美地工作 –

之所以你的代碼沒有工作，因爲你只改變了height和div的width但的image其父div內仍具有相同的高度和寬度。

你要麼改變相對於圖像尺寸其父div像

div img{ 
    width:100%; 
    height:100%; 
}

或者直接應用在圖像上懸停效果。

來源

2017-02-14 07:21:04 Uday

HTML：

<body> 
<div id="fbicon"> 
<img src="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg"/> 
</div> 
</body>

CSS：

div img { 
     height: 30px; 
     width: 30px; 
     position: absolute; 
     top: 20%; 
     left: 25%; 
     -webkit-transition: width 2s, height 2s; 
     transition: width 2s, height 2s; 
    } 
    div img:hover { 
     width: 80px; 
     height: 80px; 
    }

來源

2017-02-14 07:35:15

懸停不工作，我不知道爲什麼

回答

相關問題