HTML CSS悬停不工作
问题描述:
今天我是想实现一个动画图标,但我在使用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>
请不要只是纠正我的代码,并告诉我,我做错了什么。谢谢!
答
风格添加到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>