Hover inside Rectangle

Lakshmana

Can anyone help me in hovering the text inside the rectangle.There are three rectangles ,two are in same line third rectangle is within the edge of first and second.There are some text present inside the boxes.There are three classes used inside div and three classes are called in CSS as external sheet.
But the hover is not happening?
Before asking this doubt i have referred w3schools also no luck

scottalanmiller

Can you show us the code that you are using currently?

Lakshmana

@scottalanmiller

<!doctype html>
<HTML>
<html lang="en-us" >
<head>
<link rel="stylesheet" type="text/css" href="task3.css">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
<title>Home | Tooltip </title>
</head>
<body background="siva.jpg">
<div class="rec rectangle1">1 
<span class="tooltip1">I am a tooltip!</span></div>

<div class="rec rectangle2">2<br/>
<div class="tooltip2">I am a tooltip!</div></div>


<div class="rec rectangle3">3<br/>
<div class="tooltip3">I am a tooltip!</div></div>

</body>
</html>

Lakshmana

@scottalanmiller

.rec{ 
position: absolute;
top:30px;
width: 320px;
 padding: 100px;
 border: 5px solid gray;
 margin: 0;
text-align:left;
color: black;
font-size:40px;
border-color: yellow;

}
title, .rec {
  font-family: "Great Vibes";
}

.rectangle2{position:absolute;
left: 662px;
background-color:white;}

.rectangle3{position:relative;
 left: 340px;
 top: 270px;
background-color:green;}

.rectangle1 {
    position: relative;
    left:30px;
    background-color: red;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.rectangle1.tooltip1 {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.rec1 .tooltip1::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.rec1:hover .tooltip1 {
    visibility: visible;
    opacity: 1;
}

Lakshmana

@Lakshmana
The code is incomplete only

thwr

Didn't inspect your code, but you got a double colon in your CSS at

.rec1 .tooltip1::after {

This might cause issues

Lakshmana

@thwr i have opened a pseudo class for hovering Whether it will create a problem?

scottalanmiller

@Lakshmana said in Hover inside Rectangle:

@thwr i have opened a pseudo class for hovering Whether it will create a problem?

Did you fix the thing that he mentioned before going on to do anything else?

Lakshmana

@scottalanmiller Done some changes in html and css.but the hover comes in unknown format.I have given the code in html as well as CSS.Verify this.I want the hover to be there inside rectangle 1 and it show as It is a tooltip but it is not happening

<!doctype html>
<HTML>
<html lang="en-us" >
<head>
<link rel="stylesheet" type="text/css" href="task3continue.css">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
<title>Home | Tooltip </title>
</head>
<body background="siva.jpg">

<span class="tooltip1">Hover me</span>
<div class="rec rectangle1">Number<br/>

</div>

<div class="rec rectangle2">2<br/>
<div class="tooltip2">I am a tooltip!</div></div>

<div class="rec rectangle3">3<br/>
<div class="tooltip3">I am a tooltip!</div></div>

</body>
</html>

.rec{
border-color:yellow;
height: 150px;
width: 400px;
color:black;
font-size: 30px;

}
title, .rec {
font-family: "Great Vibes";
}

.rectangle1{background-color: brown;
position:fixed;
top:40px;
left:40px;
}

.rectangle2{background-color: red;
position:relative;
left:500px;
top:40px;}

.rectangle3{background-color: violet;
position:relative;
left: 280px;
top: 4px;

}

.rectangle1{
background-color: yellow;
padding: 20px;
display: none;
}

span:hover + .rectangle1{
display: block;
}

scottalanmiller

I don't see any CSS for the tooltip1 span.

Lakshmana

@scottalanmiller without that css file the tooltip is running