CODEWITHSUNDEEP
htmlcss
Azizul Haque
Azizul Haque

Reputation: 1

CSS Hovering Effect to show another div

I am trying to create a css hovering effect that the divs with text and a down arrow above the circle should be hidden and when I will hover the circle they should appear.

But I couldn't do this. Below the codes I used.

When I hover on this circle, the above two divs should appear like that

enter image description here

<head>
    <title>CSS Hovering Effect Practical Class</title>
    <style type="text/css">

        * {
        margin:0;
        padding:0;
        }

        #wrap {
        background:#4485F5;
        margin:10px 0;
        padding:30px;
        text-align:center;
        }

        h1 {
        color:#fff;
        letter-spacing:2px;
        font-size:50px;
        margin-bottom:15px;
        }

        p {
        color:#fff;
        background:#944E90;
        width:600px;
        font-size:25px;
        padding:3px;
        margin:auto;
        }

        span {
        font-style:italic;
        }

        #features {
        margin: 25px 0;
        }

        #baloon {
        color:#ddd;
        margin:auto;
        padding:15px;
        font-size:16px;
        letter-spacing:1px;
        background:url('bg.png') repeat;
        width:200px;
        position:relative;
        border-radius:5px;
        }

        #blackarrow {
        background:url('blackarrow.png') no-repeat top center;
        margin:auto;
        height:15px;
        width:15px;
        margin-top:-7px;
        }

        #circle {
        }

        #circle img{
        height:50px;
        width:50px;
        background:#fff;
        padding:50px;
        border:5px solid #00AEF0;
        border-radius:500px;
        transition:0.5s ease;
        }

        #circle img:hover {
        height:60px;
        width:60px;
        background:#ddd;
        padding:60px;
        border:8px solid #00AEF0;
        border-radius:500px;
        }

        #circle:hover > #baloon {
        display: inline;
        }

        #inner {
        }

        #img {}

    </style>
</head>

<body>
    <div id="wrap">
            <h1>Welcome to <span> CodeforBusiness</span> Site</h1>
            <p>Your trusted web designing service provider for a decade</p>
        <div id="features">
            <div id="baloon">Best web designing services with our team</div>
            <div id="blackarrow"></div>
            <div id="circle"><img src="avatar.gif" /></div>
        </div>
    </div>

</body>

Upvotes: 0

Views: 2823

Answers (3)

robabby
robabby

Reputation: 2200

As @Chad said, you have structured your CSS in a way that you are not actually selecting the #balloon div on hover. The > selector is the immediate child selector, so in order for the CSS to work the way you wrote it, your HTML will have to look like this:

<div id="wrap">
        <h1>Welcome to <span> CodeforBusiness</span> Site</h1>
        <p>Your trusted web designing service provider for a decade</p>
    <div id="features">
        <div id="blackarrow"></div>
        <div id="circle">
            <div id="baloon">Best web designing services with our team</div>
            <img src="avatar.gif" />
        </div>
    </div>
</div>

This is a doable solution, if you are comfortable changine the structure.

You would change the #balloon styles to something like this:

   #baloon {
        display:none;
        position:absolute;
        width:200px;
        top:-100px;
        left:50%;
        margin-left:-115px;
        padding:15px;
        font-size:16px;
        letter-spacing:1px;
        background:rgba(0, 0, 0, .5);
        border-radius:5px;
        color:#ddd;
    }

And the #circle & :hover style to this:

    #circle {
        display:block;
        position:relative;
    }

    #circle:hover > #baloon {
        display: block;
    }

Let me know if you need any help positioning the balloon.

Here is a working jsfiddle

Upvotes: 0

Christoph
Christoph

Reputation: 51201

With your markup it's not possible to achieve because the current css selectors cannot target elements which are parents and siblings only in a very limited way via the general sibling combinator~ or the more useful adjacent sibling combinator + (See docs).

You better choose a differently nested structure, to make the hover effect work.

<div id="features">
        <div id="circle"></div>
        <div id="description">
            <div id="baloon">Best web designing services with our team</div>
            <div id="blackarrow"></div>
        </div>
</div>

Now with the #description div being an adjacent sibling after your circle, you can target it via +. (If you have multiple elements, you need this container, if it's only the one #baloon element inside, you could as well target this directly).

#circle:hover + #description {
    display:none;
}

Take a look at my minimal example. You only need some fixing to the positioning and you're done.

Upvotes: 2

sn3ll
sn3ll

Reputation: 1685

As Chad's comment says, ">" is the child selector. Baloon would need to be inside the circle element. What you want is the sibling selector. "+" signifies an adjacent sibling (immediately following), and "~" is the general sibling selector, which is probably what you want:

#circle:hover ~ #baloon

Note that "baloon" has to come AFTER "circle in the markup, so you will need to reprder your elements for this to work. (i.e. put circle first).

Upvotes: 0

Related Questions