:hover to make text appear?

HTML & CSS
1

I’m trying to make text display and be white when the mouse hovers over a div but im having trouble…Heres my HTML

<div class="room">
<h4>Room: 180</h4>
<br><br>
<h4 class="name">WATCH FLOOR</h4>
</div>

CSS

.room h4.name {
	display: none;
}
.room:hover h4 {
	color:white
	display:none; 
}
.room:hover h4.name {
	color:white
	display:block; 
}

Where did I go wrong?

2

You just need to add a semi-colon after “:white” in both lines.

3 Likes
3

Hi there lurtnowski,

you might find that visibility is more appropriate…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.room {
    display:inline-block;
    padding:1em;
    background:#000;
 }

.room h4 {
    color: #fff
 }

.room h4:last-of-type {
    margin-top: 1em;
    visibility: hidden;
}

.room:hover h4:first-of-type{
    visibility: hidden;
}

.room:hover h4:last-of-type  {
    visibility: visible; 
}
</style>

</head>
<body> 

 <div class="room">
  <h4>Room: 180</h4>
  <h4>WATCH FLOOR</h4>
 </div>

</body>
</html>

coothead

1 Like
4

Hi there lurtnowski,

if you would prefer the text to stay on one line…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.room {
    max-width: 12em;
    padding: 1em;
    background: #000;
    text-align: center;
    color: #fff
 }

.room:hover h4 span:first-of-type, 
.room h4 span:last-of-type { 
    display: none;
 }

.room:hover h4 span:last-of-type { 
    display: block;
 }

</style>

</head>
<body> 

 <div class="room">
  <h4>
   <span>Room: 180</span>
   <span>WATCH FLOOR</span>
  </h4>
 </div>

</body>
</html>

coothead

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.