When Hovering, Pseudo-class Cannot be Applied

In my design, I have an image overlaid with a Play icon. The concept is that when the user hovers over the image, the brightness of the image decreases and the Play icon is replaced with a Magnifying Glass icon.

However, there seems to be a problem. When the user hovers over the Magnifying Glass icon, it switches back to the Play icon. This behavior is not desired, as the Play icon should only be visible when the user is not hovering over the image. I tried using 

.search:hover ~ .play { display:none; }
to prevent the Play icon from showing when the Magnifying Glass icon is hovered over, but it doesn't seem to be working.

http://jsfiddle.net/gDwba/

<a href="#">
    <img class="art" src="http://farm4.staticflickr.com/3133/3255025717_49268c7c85_z.jpg?zz=1">
    <img class="search" src="http://icons.iconarchive.com/icons/deleket/scrap/256/Magnifying-Glass-icon.png">
    <img class="play" src="http://icons.iconarchive.com/icons/icons-land/play-stop-pause/256/Play-Normal-icon.png">
    <div class="cover"></div>
</a>

.art { width:320px; height:240px; }
.search { z-index:3; position:absolute; top:90px; left:130px; width:75px;  height:75px; display:none; }
.play   { z-index:2; position:absolute; top:90px; left:130px; width:75px;  height:75px; } 
.cover  { z-index:1; position:absolute; top:8px;  left:8px;   width:320px; height:240px; background:#000; opacity:0.5; display:none; }

.art:hover ~ .search { display:block; }
.art:hover ~ .play   { visibility:hidden; }
.art:hover ~ .cover  { display:block; }

.search:hover ~ .play  { display:none; }
.search:hover ~ .cover { display:block; }
htmlcsscss-selectors

Answer №1

Ensure that the :hover effect is applied to the a element and not the image itself

a:hover .search { display:block; }
a:hover .play { visibility:hidden; }
a:hover .cover { display:block; }

VIEW DEMO

The issue with your CSS code is that when you hover over the search icon, the hover effect is lost on the image, causing it to return to its original state.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Upon clicking the checkbox, only the ul tag will be displayed on the screen

It's puzzling to me that when I click on the checkbox, only the ul tag with id=menu is visible on the screen, not id=social. I need to ensure display:block is set for every ul tag. .show-menu { display:block; } #menu{ float:left; } #social{ ...

htmlcsscheckbox

Tips for showcasing numerical values using radio buttons

Hello, I am currently working on my project and have a question about calling the ajax function when clicking a button. If(isset($_POST) && ($_POST['GET_PAYMENT'] == '1')) { $totalAmount = $_POST['GET_PAYMENT']; //Total amo ...

phpjqueryhtmlcssajax

What is the best way to achieve a full-width navbar with the scrollbar positioned below it?

I have a similar code to what's shown here The menu is fixed, but the scrollbar seems to be appearing from the right of the navbar What I want is for the scrollbar to start below the menu instead see image example here ...

css

I am facing issues with applying my CSS styles to my PHP include files correctly

After facing an issue with my previous post due to unclear information and improper code presentation, I realized that the root cause was not related to a duplicate question. So, here is a new post with detailed information. In my project, I have created ...

phphtmlcss

Having trouble getting dynamic values to render properly in Ionic select? Find a solution in Ionic 4

Encountering an issue with Ionic 4 and ion-select. The problem arises when attempting to bind data, specifically when preselecting data. In this scenario, the ion-select element fails to render properly. <ion-item class="transparent"> ...

htmlangularionic-frameworkionic4

PHP: When MySQL is not returning results and an undefined variable is causing issues

Currently, I am engaged in a project where I need to fetch some data from the database and display it within a form. Although my SQL query seems correct when reviewed in the SQL log, MySQL is not returning any results. I am seeking assistance on how to ret ...

phphtmlmysql

Tips for eliminating double quotes from an input string

I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...

javascriptjqueryhtml

"Enhancing user experience: Rotating hamburger menu icons with a simple click

I'm facing an issue with my hamburger menu, specifically with the icons. Here's how my HTML is structured: <input type="checkbox" id="check"/> <header class="IndexHeader"> <nav class="navigat ...

htmljquerycsshamburger-menu

How can you center a webpage and make it occupy 60% of the screen?

I was attempting to design a website where the main content takes up 60% of the body. This is what I tried initially: body { align-items: center; text-align: left; justify-content: center; width: 60%; } Unfortunately, this approach did not work ...

htmlcssalignmentfrontend

Using either the <h1> or <p> tag within my <div> element disrupts the entire layout

Whenever I add a heading tag or paragraph tag within my div, it causes the content to drop down the screen significantly. I am unsure of the cause and feel a bit overwhelmed by it. I attempted to wrap the <h1> tag in a <div>, as shown below: & ...

htmlcss

The Bootstrap CDN is malfunctioning and displaying errors in the console

I attempted to incorporate Bootstrap 4.5 using the CDN provided on their main website. However, after adding all the code lines to my project, I encountered numerous issues with my custom CSS and the Bootstrap carousel failing to function. Upon inspecting, ...

javascripthtmljquerycssbootstrap-4

Handlebars: Access to the property "some prop" has been denied as it is not considered an "independent property" of its parent object

Model of MongoDB: const mongoose = require('mongoose'); const ProductSchema = mongoose.Schema({ _id:mongoose.Schema.Types.ObjectId, Pid:Number, Pname:String, Price: Number, Pdesc: String, Picname: String }); module.ex ...

htmlnode.jsmongodbmongoosehandlebars.js

What's the most efficient way to iterate through this Array and display its contents in HTML?

I'm struggling to sort a simple array and I think the issue might be related to the time format. I'm not sure how to reference it or how I can properly sort the time in this array format for future sorting. //function defined to input values ...

javascripthtmlarraysloops

Unable to display an image element in fullscreen within a modal that is already fullscreen

I am facing an issue with my modal that is designed to occupy the full width and height of a browser. Inside this modal, there is an image enclosed within a div along with some other elements. My goal is to make the image go full screen in the browser, aki ...

javascriptjqueryhtmlcss

Learn the process of automatically copying SMS message codes to input fields in Angular17

After receiving the first answer, I made some changes to the code. However, when testing it with Angular, I encountered several errors. How can I resolve these issues? TS: async otpRequest() { if ('OTPCredential' in window) { const ab ...

javascripthtmlangularangular-material

What is the best way to apply a Javascript function to multiple tags that share a common id?

I am experimenting with javascript to create a mouseover effect that changes the text color of specific tags in an HTML document. Here is an example: function adjustColor() { var anchorTags = document.querySelectorAll("#a1"); anchorTags.forEach(func ...

javascripthtmlcss

Creating a CSS layout where a square remains confined within another square even as the screen size changes can be achieved by implementing specific styling techniques and

I have a group of squares that I want to resize proportionally when the screen size changes, but they keep overlapping instead HTML <div id="Container"> <div id="smallSquare1">square 1</div> <div id="smallSqu ...

htmlcss

Resizing an image within an anchor tag

Currently, I am working on styling a page in NextJS. The challenge I'm facing is resizing an image that is inside an anchor within a div. Despite numerous attempts, the image refuses to resize as desired. I've experimented with applying properti ...

cssnext.js

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

javascripthtmlcssnivo-slider

Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...

htmlcsscheckboxcss-selectors