CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Leo L.
Leo L.

Reputation: 145

How to use :hover to show another box next to it's parent

<style type = "text/css">
.privacycheck2:hover {
        background-color: #E60000;
        width: 100px;
        left: 860px;
        position: relative;
}
.privacycheck2 {
        position: relative;
        top: 225px;
        left: 852px;
        font-family: Helvetica Neue;
        font-size: 19px;
        color: white;
        }
.privacycheck1 {
        position: relative;
        top: 265px;
        background-color: #E60000;
        width: 24px;
        height: 24px;
        left: 843px;
        border-radius: 50px;
        border: 5px #E60000;
        }
</style>
<body>
<div class = "privacycheck2:hover">This information is private</div>
<div class = "privacycheck1"></div>
<div class = "privacycheck2">i</div>
</body>

How do I make so if you hover over privacycheck1, it will show a box next to privacycheck1 that says "This information is private" The code I wrote also makes it when you hover over privacycheck1, it would make privacycheck2 (the "I") would move and I don't want that to happen.

Upvotes: 0

Views: 63

Answers (3)

phositronax
phositronax

Reputation: 86

You can mix up CSS and javascript to do this.

<html>
<style type = "text/css">
.privacycheck1 {

    top: 265px;
    background-color: #E60000;
    width: 24px;
    height: 24px;
    left: 843px;
    border-radius: 50px;
    border: 5px #E60000;

    /// set display none
    display:none;

    }       
#privacycheck2_hover{
position: absolute;
margin-left:30px;
display:none;  // initially set its display to none

}
</style>
<body>
<div id = 'privacycheck2_hover'>This information is private</div>
<div class = "privacycheck1" onMouseOver="showOn()"  onMouseOut="showOff()"></div>

<script>
// when mouse out set css display mode to block
function showOn(){      
    document.getElementById("privacycheck2_hover").style.display = 'block';

}
// when mouse over set css display mode off
function showOff(){
    document.getElementById("privacycheck2_hover").style.display = 'none';      
}
</script>
</body>
</html>

Upvotes: 0

cocoa
cocoa

Reputation: 3921

If I understand your question correctly, you could do something like this, although you would have to rewrite your HTML.

.privacycheck1 {
    position: relative;
    background-color: #E60000;
    width: 24px;
    height: 24px;
    border-radius: 50px;
    border: 5px #E60000;   
}

.privacycheck1::before {
    content: 'i';
    position: relative;
    display: block;
    height: 20px;
    width: 200px;
    left: 30px;
}

.privacycheck1:hover::before {
    content: 'This information is private';
}
<div class="privacycheck1"></div>

Upvotes: 1

dattebayo
dattebayo

Reputation: 1402

If you are using Boot Strap, you can use built in functionality of tool-tip. Otherwise Try this :

<body>
<style type = "text/css">
.privacycheck1 {
    position: relative;
    top: 265px;
    background-color: #E60000;
    width: 24px;
    height: 24px;
    left: 843px;
    border-radius: 50px;
    border: 5px #E60000;
}

.hoverEle {
    display:none;
}
.privacycheck1:hover .hoverEle {
    display:block;
    margin-left: 50px;
}
</style>

<div class = "privacycheck1">
    <div class="hoverEle">This information is private</div>
</div>
<body>

Upvotes: 1

Related Questions