时间戳

首页 > 解决方案 > 转换为链接时 HTML 文本消失

html - 转换为链接时 HTML 文本消失

问题描述

我正在尝试将我的 HTML 页面中的现有元素转换为链接，当您将鼠标悬停在该元素上时，该元素具有额外的 css 函数来缩放它。 

<!DOCTYPE html>
<html>
<head>
<style>
.lefthotbarbtn{
        float:left;
        padding:12px;
        font-family:Verdana,sans-serif;
        transition:0.3s;
    }
    .lefthotbarbtn:hover{
        float:left;
        padding:12px 32px;
        font-family:Verdana,sans-serif;
        background-color:#d3d3d3;
        border-radius:69px;
        color:#0f0f0f;
        font-family:Verdana,sans-serif;
    }
    
    .contactusbtn{
        float:right;
        padding:12px;
        background-color:white;
        border-radius:69px;
        color:black;
        font-family:Verdana,sans-serif;
        transition:0.3s;
    }
    .contactusbtn:hover{
        float:right;
        border-radius:0px;
        padding:12px 24px;
        background-color:#d3d3d3;
        border-radius:69px;
        color:#0f0f0f;
        font-family:Verdana,sans-serif;
    }
    </style>
</head>
<body>
<div class="lefthotbarbtn">Home</div>
        <div class="lefthotbarbtn">Who Are We?</div>
        <div class="lefthotbarbtn">Products</div>
        <div class="lefthotbarbtn">Help!</div>
            
            <div class="contactusbtn">contact us</div>
            </div>
</body>
</html>

我尝试了各种将每个人转换为链接而不删除现有信息的方法，但是每当我这样做时，文本要么消失要么移动。我想要做的只是将文本作为链接而不改变它的外观，我不知道怎么做。

标签： htmlcsshover

解决方案

请提及您将来尝试过的事情。

我会说几件事：

  • 如果您只想将它​​们变成链接，只需使用a链接标签。
  • 对我来说，这似乎是你建立一个标题。nav与ul li一起使用a。保持清洁和一般良好的做法。
  • 如果你想沿着这条路线走，你可以转换div成a然后使用 css 来设计a你喜欢的。

但是，如果该尝试有问题​​，您也可以这样做（一般来说不是一个好主意，为什么？）：

<a href="#"><div class="lefthotbarbtn">Who Are We?</div></a>

推荐阅读