HTML CSS懸停不工作

-5

今天我是想實現一個動畫圖標，但我在使用CSS陷入了麻煩。該upcomming代碼會說比我更可以說：HTML CSS懸停不工作

.Menu { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: fixed; 
 
    background-color: #35f5ca; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.title { 
 
    font-family: "Sans-Serif"; 
 
    position: fixed; 
 
    top: 1%; 
 
    left: 0; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    color: white; 
 
} 
 

 
.icon:hover { 
 
    width: 45px; 
 
    height: 45px; 
 
    position: fixed; 
 
    right: 0px; 
 
    top: 0px; 
 
    opacity: 1.0; 
 
} 
 

 
.body {}

<div class="Menu"> 
 
    <p1 class="title"> 
 
    <b> 
 
\t Mettu 
 
\t </b> 
 
    <img class="icon" src="images/iconplanet.png" style="transition: all 0.5s; width:40px; height:40px; position:fixed; right: 5px; top: 0.5%; opacity: 0.5;" /> 
 
    </p1> 
 
</div> 
 

 
<div class="body"> 
 

 
</div>

請不要只是糾正我的代碼，並告訴我，我做錯了什麼。謝謝！

來源

2017-04-07 A Random Dude

-1

風格添加到CSS和。菜單應該是。菜單

.Menu 
 
    { 
 
    \t width: 100%; 
 
    \t height: 50px; 
 
    \t position: fixed; 
 
    \t background-color: #35f5ca; 
 
    \t top: 0; 
 
    \t left: 0; 
 
    } 
 
    .title 
 
    { 
 
    \t font-family:"Sans-Serif"; 
 
    \t position:fixed; 
 
    \t top: 1%; 
 
    \t left: 0; 
 
    \t vertical-align: middle; 
 
    \t font-size: 150%; 
 
    \t color: white; 
 
    } 
 
    .icon 
 
    { 
 
     transition: all 0.5s; 
 
     width:40px; 
 
     height:40px; 
 
     position:fixed; 
 
     right: 5px; 
 
     top: 0.5%; 
 
     opacity: 0.5; 
 
    } 
 
    .icon:hover 
 
    { 
 
    \t width:45px; 
 
    \t height:45px; 
 
    \t position:fixed; 
 
    \t right: 0px; 
 
    \t top: 0px; 
 
    \t opacity: 1.0; 
 
    } 
 
    .body 
 
    { 
 
    \t 
 
    }

<html> 
 
    <head><title>Mettu</title> 
 
    
 
    <head> 
 
    <body> 
 
    <div class="Menu"> 
 
    <p1 class="title"> 
 
    \t <b> 
 
    \t Mettu 
 
    \t </b> 
 
    \t <img class="icon" src="images/iconplanet.png" /> 
 
    </p1> 
 
    </div> 
 

 
    <div class="body"> 
 

 
    </div> 
 

 
    <?php 
 
    //Menu 
 

 

 
    //Menu's Brain 
 

 

 
    ?> 
 

 
    </body> 
 

 
    <html>

來源

2017-04-07 07:33:04

樣式屬性more specific任何任何規則集。

如果你有一個規則集與.icon:hover，並在樣式屬性相同的屬性，然後在樣式屬性的值將獲勝。

不要使用樣式屬性。

來源

2017-04-07 07:29:56 Quentin

HTML CSS懸停不工作

回答

相關問題