html - 每次我将鼠标悬停在按钮上时，我的文字和图像都会移动-6ren

html - 每次我将鼠标悬停在按钮上时，我的文字和图像都会移动

转载作者：太空宇宙更新时间：2023-11-04 10:09:21

25

4

每次我将鼠标悬停在 7 个按钮中的任何一个时，一切都会向右移动一点。有人可以快速告诉我解决方案吗？我知道这不是很好的代码，但我只是 HTML 的初学者。

<html>
<head> 
    <title> Desenele Animate </title>
    <center> <font face="Lucida Bright" color="#000000" size="48"> Desenele Animate </font> </center>   
    <style>
        .button {
        background-color: #4CAF50;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
        border-radius: 8px;
        width: 250px;
        }

        .button1 {
            background-color: #4CAF50;
            color: white;
        }
        .button1:hover {
            background-color: white; 
        color: black; 
            border: 2px solid #4CAF50;
        }

        .button2 {
            background-color: #008CBA;
            color: white;
        }
        .button2:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #008CBA;
        }

        .button3 {
            background-color: #f44336;
            color: white;
        }
        .button3:hover {
        background-color: white; 
            color: black; 
            border: 2px solid #f44336;
        }

        .button4 {
        background-color: #ffa500;
        color: white;
        }
        .button4:hover {    
        background-color: white;
            color: black;
            border: 2px solid #ffa500;
        }`

        .button5 {
        background-color: #bf80ff;
            color: white;
        }
        .button5:hover {
            background-color: white;
            color: black;
            border: 2px solid #bf80ff;
        }

        .button6 {
        background-color: #ff66ff;
            color: white;
        }
        .button6:hover {
            background-color: white;
            color: black;
            border: 2px solid #ff66ff;
        }
        .button7 {
        background-color: #00cccc;
            color: white;
        }
        .button7:hover {
            background-color: white;
            color: black;
            border: 2px solid #00cccc;
        }

    </style>        
</head>
<body bgcolor= "white"> 
    <br>
    <div id="nav">
    <table style="float:left;">
        <tr><td><a href="Archer.html" class="button button1">Archer</a><br></td></tr>
        <tr><td><a href="South park.html" class="button button2">South Park</a><br></td></tr>
        <tr><td><a href="Gravity Falls.html" class="button button3">Gravity Falls</a><br></td></tr>
        <tr><td><a href="Steven Universe.html" class="button button4">Steven Universe</a><br></td></tr>
        <tr><td><a href="Adventure Time.html" class="button button5">Adventure Time</a><br></td></tr>   
        <tr><td><a href="Rick and Morty.html" class="button button6">Rick And Morty</a><br></td></tr>
        <tr><td><a href="Futurama.html" class="button button7">Futurama</a><br></td></tr>
    </table>    
    </div>
    <center> <font face="Lucida Bright" color="#000000" size="5"> Desenele animate au inceput sa devina din ce in ce mai interesante, diferite si amuzante. Desigur, nu ne referim la desene precum "Looney Tunes". Ne referim la cele noi! Pline de sarcasm si de glume rautacioase! Am ales cateva PE care noi le consideram foarte inventive, amuzante si suntem siguri ca o sa va placa. Inainte de a le prezenta ne-am gandit sa vorbim putin despre ce sunt ele si evolutia lor, DAAAAR ne-am dat seama ca ar fi MULT prea plictisitor asa ca hai sa trecem direct la review-uri.</font></center>
    <br>
    <center> <img src="cornel.jpg"> </center>
</body>
</html>

最佳答案

你应该添加一个默认的透明边框

.button {
    border: 2px solid transparent;

原因 :hover你添加那个边框border: 2px solid #00cccc;因此元素移动那些 2 px

a.btn:hover{
  border:2px solid red;
}

/* solution */
a.button{
  border:2px solid transparent;
}
a.button:hover{
  border:2px solid red;
}

<a class="btn">HOVER ME (I HAVE THT ISSUE...)</a><br>
<a class="button">HOVER ME (I feel just fine!)</a><br>

我刚刚注意到您正在使用 <center>和 <font>标签。不要这些标签在某些浏览器中工作只是为了向后兼容但已弃用!使用 CSS text-align: center;和 font-size相反。

关于html - 每次我将鼠标悬停在按钮上时，我的文字和图像都会移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37736290/

25

4

0

文章推荐： Python - 检查列表中的所有字母是否与字符串中的字母匹配？

文章推荐： linux - 需要 grep/awk/gawk 返回整个部分，尽管有断线

typescript - 确定类型是 'string' 文字、 'number' 文字还是 'string | number' 文字
由于 typescript 现在支持条件类型，我决定进行一些元编程，为 VSCODE intellisense 添加更多 flavor 。但是，虽然使用 A extends B 可以轻松分离其他类型，
PHP:文字\n而不是新行
我有一个 php var，它在回显时将 JS 函数写入页面的源代码。该函数循环遍历 CSV，因此其中包含以下行: $str="var lines = data.split('\n');"; 目前，当回
JavaScript 文字，键的指针值
我有以下代码: name= "a"; value="b" $.post("ajax.php", {name:value}).... 然而 ajax.php 将收到 name=b 而不是 a=b。我如
javascript - 如何获取符号名称(文字)？
以下情况: var myVehicle = { brand: 'Tesla' }; var isMoving = Symbol(); var currentStatus = Symbol(); myV
JavaScript "\8"文字
我正在为 Python 翻译器编写 JavaScript，“\8”和“\9”给我带来了很多问题。根据文档，像“\8”或“\9”这样的东西是非法的，因为它们不是有效的八进制转义符。 Esprima pa
Android背景隐藏 subview 文字
我有一个简单的 LinearLayout。当我将 android:background 添加到 LinearLayout 时，TextView 不再可见。我不明白什么？
html - 如何在图像悬停时创建深色淡入淡出+文字？
在尝试获得某种效果时遇到困难: 我有一张图片。我想将鼠标悬停在它上面。它应该变黑并弹出一些文本。例子^ 执行此操作最简单/最简单的设置是什么？最好只有 HTML 和 CSS 注意:该元素需要在 CS
C 文字，这些存储在哪里
考虑以下代码: #include void f(const char * str) { str = "java"; } void main (int argc, char * argv[])
MySQL unicode 文字
我想在 MySQL 中插入一条具有非 ASCII Unicode 字符的记录，但我在一个不允许我轻松键入非 ASCII 字符的终端上。如何在 MySQL 的 SQL 语法中转义 Unicode 文字？
[Perl]文字/代码批量替换工具
Perl脚本batchReplace.pl可以用来批量替换文件中的文字/代码。可在指定目录中查找指定类型的文件，并递归检查子目录；在输出文件时复制输入文件的目录结构。 [附件]Win32应用程序b
dart - 在flutter中分享图片+文字+网址的便捷方式
我知道从 flutter 应用程序共享的官方包。 https://pub.dartlang.org/packages/share 共享文本和 url 很容易，但我想共享来自服务器的图像意味着它是 UR
qt - 如何定义 qreal 文字
在 Qt 文档中，它说 qreal是一个 Typedef for double unless Qt is configured with the -qreal float option. 这基本上意味
类型中的 Idris Nat 文字
我想让 idris 证明 testMult : mult 3 3 = 9有人居住。不幸的是，这是键入为 mult (fromInteger 3) (fromInteger 3) = fromInte
objective-c - 我自己的@{} 文字
如您所知，Apple 为 NSNumber、NSDictionary、NSArray 等类提供了 @literals，因此我们可以通过这种方式创建对象，例如 NSArray *array = @[ob
F# - 公共(public)文字
有没有办法在类型上定义公共(public)文字(C# 中的公共(public) const)？显然 let 类型中的绑定(bind)必须是私有(private)的，并且 Literal 属性不能应用于
ANTLR4 语法不识别 bool 文字
为什么下面的语法不能识别 bool 值？我已经将其与 Java 和 GraphQL 的语法进行了比较，但不明白为什么它不起作用。给定以下语法，解析如下: foo = null // foo = v
S 表达式的列表，(文字)数据的向量？
当我需要一个文字来测试一个带有序列的函数时，我注意到我自己的习惯比列表更频繁地使用向量。 IE。 : (map inc [1 2 3]) 但不是: (map inc (list 1 2 3)) 虽然它
sqlite - 文字(原始)值作为sqlite中的外键
是否可以在sqlite中制作类似的东西？ FOREIGN KEY(TypeCode, 'ARawValue', IdServeur) REFERENCES OTHERTABLE(TypeCode, T
assembly - 文字 VS 立即操作数
在我这学期的系统软件类(class)中，我们正在学习汇编程序和其他系统软件。在阅读整个类(class)时，我遇到了LITERALS主题。对文字和立即操作数进行了比较，发现它们之间的唯一区别是文字不被
opencv - Gstreamer RTP传输视频+文字
我正在使用命令行语法编写一个 gstreamer 管道来发送视频流，并想用它发送数据。我认为可行的一种解决方案是将数据作为字幕文件发送。我可以使用以下管道通过 rtp 多路复用视频和字幕文件: gs

首页

博学

6Ren·AI

商城

html - 每次我将鼠标悬停在按钮上时，我的文字和图像都会移动