CODEWITHSUNDEEP
javascripthtmlcss
suup
suup

Reputation: 25

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

Upvotes: 1

Views: 106

Answers (4)

Daniel Black
Daniel Black

Reputation: 605

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:

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;
}

One caveat with this approach is that the #textContainer element and the #imgToReplace element must be the same height and width. If you do decide to go this route maybe use some js to set the height and width of the created #textContainer element.

The fiddle can be found here.

Upvotes: 0

Mister Jojo
Mister Jojo

Reputation: 22310

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>

Upvotes: 0

Johannes
Johannes

Reputation: 67758

You can use nav:hover::after as the selector for the text (i.e. 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 {
  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>

Upvotes: 1

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

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

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

nav {
  font-size: 40px;
}

nav span {
  display: none;
}

nav:hover a {
 display: none;
}

nav:hover span {
 display: inline-block;
}

https://jsfiddle.net/b2ycwjtu/

Upvotes: 1

Related Questions