悬停功能和链接移位

Question

我是编码的新手，我正在创建一个主页。我试图在我的主页图像上获得黑白悬停功能。但是，当我将鼠标悬停在图像上时，它不起作用。只有当您将鼠标悬停在图像的左侧时，图像才会从颜色变为BW。有想法该怎么解决这个吗？任何帮助是极大的赞赏！

这是我的代码：

＆＃13;

＆＃13;

 @font-face {
        font-family: "p22-underground";
        src: qzo1okq;
    }
    
    
    .container {
        position: absolute;
        padding-bottom: 0px;
        margin-top: -125px;
    	margin-right: -70px;
    	float: left;
    }
    
    
    .Marlon {
    	position: absolute; 
     	margin-top: -275px;
     	margin-left: 15px;
    
    }
    
    /*B&W*/
    .blue {
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
     
    .blue:hover {
      -webkit-filter: grayscale(100%);
    }
    
    .blue {
    
        position: relative;
        background-position: left top;
        margin-top: 120px;
        margin-left: -250px;
        max-width:100%;
        height:auto;
        text-align: center;
    
        
    }
    /*B&W*/
    .Tammy {
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
     
    .Tammy:hover {
      -webkit-filter: grayscale(100%);
      display: block;
    }
    .Tammy {
    
        position: relative;
        background-position: left top;
        margin-top: -5px;
        margin-left: -250px;
        max-width:100%;
        height:auto;
        text-align: center;
    
       
    }
    
    
    /*B&W*/
    .Tacos {
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
     
    .Tacos:hover {
      -webkit-filter: grayscale(100%);
    }
    .Tacos {
    
        position: relative;
        background-position: center;
        margin-top: -623px;
        margin-left: 100px;
        max-width:100%;
      	text-align: center;
    
    }
    /*B&W*/
    .Glasses {
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
     
    .Glasses:hover {
      -webkit-filter: grayscale(100%);
    }
    .Glasses {
    
        position: relative;
        background-position: center;
        margin-top: -5px;
        margin-left: 100px;
        max-width:100%;
        height:auto;
        text-align: center;
    
     
    
    }
    /*B&W*/
    .Door {
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
     
    .Door:hover {
      -webkit-filter: grayscale(100%);
    }
    .Door{
    
        position: relative;
        background-position: right top;
        margin-top: -623px;
        Margin-left:700px;
        max-width:100%;
        height:auto;
        text-align: center;
    
    
    }
    
    
    .Social {
    
    	position: relative;
        text-align: center;
    	inline: block;
        padding-bottom: 0px;
        top:-25px;
        bottom: 0px;
        margin:auto;
    
    
    
    
    }
    
    
    body {
        background-image: url("http://ac.aup.edu/~a94241/background.jpeg");
    
    }
    
    ul {
        list-style-type: none;
        height: 50px;
        margin: 150;
        padding: 80;
        overflow: hidden;
        margin-top: 200px;
        background-color: black;
        font-family: "p22-underground";
        font-weight: "500";
        font-size: 150%;
    
    }
    
    li {
        float: none;
        color: "#fcf8de";
        position: relative;
        display: inline-block;
        	bottom: 12px;
        margin-left: 10px;
        margin-right: 10px;
        
    
    
       
    }
    
    li a {
        display: block;
        color: "#fcf8de";
        text-align: center;
       padding: 14px 16px;
        margin-left: 5px;
    }
    
    footer {
     
    
        height:10px;
        padding: 20px;
        margin-top:100px;
        text-align:left; 
        vertical-align:middle;
        padding-top: 14px;
        background-color: black;
        font-family: "p22-underground";
        font-weight: "300";
        position:static;
    }
    
    

＆＃13;

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://use.typekit.net/qzo1okq.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
    </head>
    <body>
    <div class="container">
     <a href="http://ac.aup.edu/~a94241/Marlon Coding.html">
      <img src="http://ac.aup.edu/~a94241/cactus.png" alt="Cactus Vector" width="100" height="90">
      </a>
    </div>
     <div class="Marlon">
      <a href="http://ac.aup.edu/~a94241/Marlon Coding.html">
      <img src="http://ac.aup.edu/~a94241/Marlon Vector.png" alt="Marlon Vector" width="450" height="550">
      </a>
    </div>
    
    <ul> 
    <center>
    <h1 style="font-p22-underground-sc, sans-serif;font-style:normal; font-weight:500; font-size:80% "</h1>
      <li><a href="http://ac.aup.edu/~a94241/Philosophie.html" style="color: #fcf8de; text-decoration: none;">PHILOSOPHIE</a></li>
      <li><a href="http://ac.aup.edu/~a94241/Menu.html" style="color: #fcf8de; text-decoration: none;">MENU</a></li>
      <li><a href="http://ac.aup.edu/~a94241/Nous Trouver.html" style="color: #fcf8de; text-decoration: none;">NOUS TROUVER</a></li>
      <li><a href="http://ac.aup.edu/~a94241/Avis.html" style="color: #fcf8de; text-decoration: none;">AVIS</a></li>
      <li><a href="http://ac.aup.edu/~a94241/Contact.html" style="color: #fcf8de; text-decoration: none;">CONTACT</a>
     </li>
    </ul>
    </center> 
    <div class="opacity">
    <div class="blue">
    <a href="http://ac.aup.edu/~a94241/Philosophie.html">
    <img src="http://ac.aup.edu/~a94241/blue car.png" alt="BlueCar" width="300" height="310">
    </a>
    </div>
    <div class="Tammy">
    <a href="http://ac.aup.edu/~a94241/Avis.html">
    <img src="http://ac.aup.edu/~a94241/tammy Lunch.png" alt="TammyLunch" width="300" height="310">
    </a>
    </div>    
    <div class="Tacos">
    <a href="http://ac.aup.edu/~a94241/Contact.html">
    <img src="http://ac.aup.edu/~a94241/tacos.png" alt="Tacos" width="300" height="310">
    </a>
    </div>    
    <div class="Glasses">
    <a href="http://ac.aup.edu/~a94241/Menu.html">
    <img src="http://ac.aup.edu/~a94241/Glasses.png" alt="Glasses" width="300" height="310">
    </a>
    </div>    
    <div class="Door">
    <a href="http://ac.aup.edu/~a94241/Nous Trouver.html">
    <img src="http://ac.aup.edu/~a94241/door.png" alt="Door" width="300" height="620">
    </a>
    </div>
    </div>      
    <footer>
      <p1><font color="#fcf8de">CALL: 01 40 60 12 12</font></p1>
    <div class="Social">
    <a href="https://www.facebook.com/restaurantmarlon">
    <img src="http://ac.aup.edu/~a94241/facebook.png" alt="Facebook Vector" width="20" height="25">
    </a>
    <a href="https://www.instagram.com/restaurantmarlon/">
    <img src="http://ac.aup.edu/~a94241/instragram.png" alt="Instargram Vector" width="20" height="25">
    </a>
    </div>  
    </footer>
    </body>
    </html>

＆＃13;

＆＃13;

＆＃13;