Question

调查这个问题超过一个小时，需要您的帮助，而我在互联网上找不到任何东西。我希望当鼠标悬停在图像上方时，将其更改为“ home”之类的文本，而鼠标悬停时，它将变为图像。 但是该网页在导航栏上有多个链接，例如-主页/关于/联系...

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>

Answer 1

这是一种更简单，更简洁的方法：涉及显示和隐藏不同的元素，而不是在运行时编辑元素类型和格式：

HTML

.babelrc

CSS

<!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>

https://jsfiddle.net/b2ycwjtu/

Answer 2

您可以使用nav:hover::after作为文本（即伪元素）的选择器，并用position: absolute和白色背景覆盖/隐藏图标（和position: relative nav元素本身以使其成为绝对位置的锚点

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>

Answer 3

顺便说一下...？

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>

Answer 4

您可能会告诉我们CSS是解决问题的方法，但是如果您想使用javascript来做到这一点，可以这样说：

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

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

#container{
  border: 1px solid black;
  display: inline-block;
  min-height: 150px;
  min-width: 150px;
}

此方法的一个警告是#textContainer元素和#imgToReplace元素必须具有相同的高度和宽度。如果您决定走这条路，则可以使用一些js设置所创建的#textContainer元素的高度和宽度。

可以找到小提琴here.

鼠标悬停时的CSS从图像更改为文本

4 个答案: