Question

这是我的问题： https://youtu.be/5I9K05FJFBI

我只是一个初学者，我的问题是，当我单击徽标时应按其原样进行操作，但菜单的最左侧是一个正方形和一个反向徽标，我不想在那儿。我只希望徽标是可单击的（href =“ index.html”），并且左侧没有正方形。我是一个初学者，所以请写出解决方法，我自己做过，从书中做过，以及在youtube上有一些教程，但我无法解决。感谢您的帮助。

CSS：

a:hover {
            background-color: #e67e22;
            transform:scale(1.2) rotate(5deg);  
 }

.topnav-right {
            float: right;
 }

.topnav {
            overflow: hidden;
}

.topnav a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
font-size: 20px;
}


.stred {
          position: absolute;
          left: 50%;
          top: 0;
          content: "";
          text-align: center;
        }

.zaoblenie {
            border-radius: 50%;
          }

.zmensit {
          width: 120px;
          height: 120px;  
        }

HTML：

<div class="topnav">

<li><a href="#">O nás</a></li>


<li><a href="adminteam.html">Admin Team</a></li>


**<a href="index.html"><img class="zmensit zaoblenie stred"   src="images/logo.png" alt="logo" style="border-right-style: solid; left:  46.224% !important;border-right-width: 0px;"></a>**  


<div class="topnav-right">
<li><a href="vecicky.html">Vecičky</a></li>
<li><a href="youtuberi.html">Youtuberi</a></li>

</div>
</div>

Answer 1

首先，您的问题非常不清楚。其次，根据编码标准，HTML格式也不正确。但我仍然可以为您提供帮助。

请在下面的html更新代码中找到

<div class="topnav">
    <ul>
        <li><a href="#">O nás</a></li>
        <li><a href="adminteam.html">Admin Team</a></li>
    </ul>
    **<a class="logo-block" href="index.html"><img class="zmensit zaoblenie stred"   src="http://hdwallpapersrocks.com/wp-content/uploads/2013/12/Amazing-boat-in-sea-marvelous-wallpapers.jpg" alt="logo" style="border-right-style: solid; left:  46.224% !important;border-right-width: 0px;"></a>**  
    <div class="topnav-right">
        <ul>
            <li><a  href="vecicky.html">Vecičky</a></li>
            <li><a  href="youtuberi.html">Youtuberi</a></li>
        </ul>
    </div>
</div>

此外，找到已更新的CSS

a:not(.logo-block):hover {
    background-color: #e67e22;
    transform:scale(1.2) rotate(5deg);  
}

我应用的css是为了不使具有类“徽标块”的“ a”标签具有悬停效果。

如果您需要任何进一步的帮助，请告诉我。

谢谢

Answer 2

要删除左侧的正方形，请将类“ stred”添加到“ a”标签中，而不是将其添加到“ img标签”中。

Answer 3

a:not(.logo-block):hover {
    background-color: #e67e22;
    transform:scale(1.2) rotate(5deg);  
}

用于从徽标中删除橙色的代码。您需要将“徽标块”类赋予徽标的“ a”标签

**<a class="logo-block" href="index.html"><img class="zmensit zaoblenie stred"   src="http://hdwallpapersrocks.com/wp-content/uploads/2013/12/Amazing-boat-in-sea-marvelous-wallpapers.jpg" alt="logo" style="border-right-style: solid; left:  46.224% !important;border-right-width: 0px;"></a>**

谢谢

我使用a：hover，但我不希望它对照片有影响

3 个答案: