The hover effect on sibling elements is not functioning for the <img> tag

Question

The hover effect on sibling elements is not functioning for the <img> tag

When you hover over the image displayed within the

<div class="like absolute">

, the image within the

<div class="balloons absolute">

doesn't appear.

<div id="container" class="relative">
    <div class="like absolute">
        <a href="#"><img src="http://www.simplemailerresponsive.bugs3.com/images/like.png" width="32" height="32" alt="Like" /></a>
    </div>
    <div class="balloons absolute">
        <a href="#"><img src="http://www.simplemailerresponsive.bugs3.com/images/love_symbol.png" width="24" height="24" alt="Symbol" /></a>
    </div>
</div>

In the code snippet above, div#container acts as the parent <div>, with "like" and "balloons" serving as sibling elements to each other.

CSS:

#container .like a img:hover ~ .balloons > a > img{
    opacity: 1;
}

Visit the JSFiddle link to see this in action.

html css hover siblings

Answer 1

Answer №1

Maybe you're searching for something similar to this:

.like{
opacity: 0;
border: none;}

Check out the updated solution here: http://jsfiddle.net/psut1e3b/17/

When you hover over the like button, the heart will appear. Feel free to adjust the classes and positioning to achieve your desired outcome.

Answer 2

Maybe you're searching for something similar to this:

.like{
opacity: 0;
border: none;}

Check out the updated solution here: http://jsfiddle.net/psut1e3b/17/

When you hover over the like button, the heart will appear. Feel free to adjust the classes and positioning to achieve your desired outcome.

Answer 3

Answer №2

The like button remains visible at all times, with the balloons appearing when hovered over. That's all there is to it. I'm not certain if this is what you're searching for: Fiddle (http://jsfiddle.net/3ddzzeqe/)

Here's the CSS code:

.balloons{
    display:none;
}

.like:hover + .balloons{
    display:block;
}

Answer 4

The like button remains visible at all times, with the balloons appearing when hovered over. That's all there is to it. I'm not certain if this is what you're searching for: Fiddle (http://jsfiddle.net/3ddzzeqe/)

Here's the CSS code:

.balloons{
    display:none;
}

.like:hover + .balloons{
    display:block;
}

The hover effect on sibling elements is not functioning for the <img> tag

Answer №1

Answer №2

Similar questions

Zooming on a webpage is causing problems

Is there a way to showcase the outcome of a Python script on an HTML webpage?

Arranging two stretchable div elements side by side

What is the best way to relocate an image or link using CSS?

Box with negative z-index cannot be clicked

When clicking on a checkbox's assigned label, Chrome and IE may experience delays in firing the change event

Migrating a few PHP scripts to ColdFusion

The jQuery animation concludes before its anticipated completion

Mysterious Chrome glitch causes SVG element to shift down by 2 pixels

"The issue with the nested nth-child property is that it only affects the first element it is applied to

Optimizing Web Scraping in R: Selecting the Ideal CSS Selector, Class, or HTML Element

The options in the drop-down menu appear to be stuck and remain in place

Node.js file successfully establishes a database connection, but script tags fail to do so

Issue with Jquery Forms Plugin jqXHR response in Internet Explorer versions 8 and 9

Items vanish when hovering over them

Utilizing pop-up alerts and AJAX requests in jQuery forms

Attempting to align the dropdown menu to the left side

Align a single item to the right in PrimeNG p-menubar

Is there a quicker method than using document.getElementById('element-id').innerHTML to retrieve content?

What is the best method for combining multiple text box values into a single text box?