Question

我的导航栏左侧有一个徽标，当我将鼠标悬停在任何想法上时，我希望它能够产生缩放效果？我确实在可待因上尝试了一些代码但由于某些原因他们不工作我认为我需要jquery但我现在不想使用它。 .logo是导航栏徽标。任何帮助都会很棒！

＆＃13;

body {
  margin: 0px;
  padding: 0px;
  font-family: Arial;
}

.nav {
  margin: 0;
  opacity: 0.7;
  background-color: #FFD700;
  color: black;
  list-style: none;
  font-weight: bold;
  text-align: right;
  padding: 25px 0 25px 0;
}

.nav>li {
  display: inline-block;
  padding: 0 25px 0 25px;
}

.nav>li>a {
  text-decoration: none;
  color: black;
}

.nav>li>a:hover {
  color: #D2691E;
}

.logo {
  color: black;
  float: left;
  position: absolute;
  top: -65px;
  left: -210px;
  font-size: 20px;
  font-weight: bold;
}

.logo>a {
  text-decoration: none;
  color: black;
}

.logo>a:hover {}

.banner1 {
  width: 100%;
  display: block;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title> Trexon Music </title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <ul class="nav">
    <div class="logo">
      <a href="default.asp">
        <img src="/Users/Mushriff/Desktop/Website/Images/Bannerlogo.psd">
      </a>
    </div>
    <li><a href="default.asp">Home</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About Us</a></li>
    <li><a href="music.asp">Music</a></li>
    <li><a href="merc.asp">Merchandise</a></li>
  </ul>
  <div class="banner">
    <img class="banner1" src="/Users/Mushriff/Desktop/Website/Images/Cover.psd">
  </div>
</body>
</html>

＆＃13;

Answer 1

首先，如果您要将徽标上传到您的网站，请使用以下文件格式：

gif ， png ， jpeg

在psd编辑工具中打开 psd 文件，例如 photoshop 或插图画家，并使其成为上述格式之一。

如果您想要悬停缩放效果，请尝试 CSS3 transition和transform属性。

.logo img {
  transition: transform 1s ease;
}
.logo:hover img {
  transform: scale(1.2,1.2);
}

Answer 2

只需使用以下CSS

.logo img {
    transition: all 0.5s ease-in-out;
}
.logo:hover img {
    transform: scale(1.1,1.1);
    transform-origin: 0 0;
}

Answer 3

首先，使用.PNG或.JPG图像。

比在徽标图像上应用悬停效果。

.logo img {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.logo:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

可以在CodePen

清除该概念

Answer 4

你应该使用png，jpg，jpeg，...作为图像。不要使用.psd文件

如果你想要缩放效果图像，只需添加以下css

.logo img {
    transition: all 0.5s ease-in-out;
}
.logo:hover img {
    transform: scale(1.1,1.1);
    transform-origin: 0 0;
}

Answer 5

.logo a > img :hover{ height: 100px; width: 100px;}

如何在悬停时使徽标变焦

5 个答案: