鼠标悬停时的CSS从图像更改为文本
[英]Css on mouse over change from image to text
问题描述
Was looking into this issue for more than an hour, need your help guys, nothing I could find on internet. 
正在研究这个问题一个多小时，需要您的帮助，而我在互联网上找不到任何东西。 I want that when on mouse over the image changed to text like "home" and on mouse out it would change back to the image. 我希望当鼠标悬停在图像上方时，将其更改为“ home”之类的文本，而鼠标悬停时，它将变为图像。 But the webpage has multiple links on nav bar for example - Home/About/Contact... 但是该网页在导航栏上有多个链接，例如-主页/关于/联系...
nav { font-size: 40px; } nav:hover { content: "home" }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <nav> <a href="#" class="fa fa-home"></a> </nav> </body> </html>
4 个解决方案
解决方案1
1 2019-01-02 16:12:30
This is a simpler and cleaner approach to the task: it involves showing and hiding different elements instead to edit an element type and format on runtime: 这是一种更简单，更干净的方法：涉及显示和隐藏不同的元素，而不是在运行时编辑元素类型和格式：
HTML HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<a href="#" class="fa fa-home"></a>
<span>text</span>
</nav>
</body>
</html>
CSS CSS
nav {
font-size: 40px;
}
nav span {
display: none;
}
nav:hover a {
display: none;
}
nav:hover span {
display: inline-block;
}
https://jsfiddle.net/b2ycwjtu/ https://jsfiddle.net/b2ycwjtu/
解决方案2
1 已采纳 2019-01-02 16:14:21
You can use nav:hover::after as the selector for the text (ie a pseudo-element), with position: absolute and a white background to cover/hide the icon (and position: relative on the nav element itself to make it the anchor for the absolute position) 您可以使用nav:hover::after作为文本（即伪元素）的选择器， position: absolute ，白色背景覆盖/隐藏图标（ position: relative在nav元素本身上position: relative绝对位置的锚点）
nav { font-size: 40px; position: relative; } nav:hover:after { content: "home"; position: absolute; top: 0; left: 0; background: #fff; }
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <nav> <a href="#" class="fa fa-home"></a> </nav> </body>
解决方案3
0 2019-01-02 16:18:27
by the way... ? 顺便说说... ？
nav { font-size: 40px } nav span { display: none } nav:hover span { display:inline }
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <nav> <a href="#" class="fa fa-home"></a> <span>HOME</span> </nav> </body>
解决方案4
0 2019-01-02 16:47:15
As you can probably tell CSS is the way to go for this, but that being said if you wanted to do it with javascript you could use something like this: 如您所知，CSS是解决此问题的方法，但是如果您想使用javascript来实现，则可以使用如下代码：
HTML HTML
<html>
<head>
<title>Image/Text Switching</title>
</head>
<div>
<h1>
Image/Text Switching
</h1>
<div>
<div id="container">
<img id="imgToReplace" src="https://via.placeholder.com/150"/>
<div id="textContainer"></div>
</div>
</div>
</div>
</html>
JS JS
var replacementText = "Home";
var imgElement = document.getElementById('imgToReplace');
var textContent = document.createTextNode(replacementText);
var textContainer = document.getElementById('textContainer');
var container = document.getElementById('container');
container.addEventListener("mouseover", function(){
imgElement.style.display = "none";
textContainer.appendChild(textContent);
});
container.addEventListener("mouseout", function(){
imgElement.style.display = "unset";
textContainer.innerHTML = "";
});
CSS CSS
#container{
border: 1px solid black;
display: inline-block;
min-height: 150px;
min-width: 150px;
}
One caveat with this approach is that the #textContainer element and the #imgToReplace element must be the same height and width. 使用此方法的一个警告是#textContainer元素和#imgToReplace元素必须具有相同的高度和宽度。 If you do decide to go this route maybe use some js to set the height and width of the created #textContainer element. 如果您决定走这条路，则可以使用一些js设置所创建的#textContainer元素的高度和宽度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.