When using the :hover pseudo class, Chrome disregards the overflow hidden style change

In my design, there is a circular div (border-radius: 50%) that includes two smaller divs transformed to look like segments of a circle. To achieve this effect, I have set overflow: hidden on the parent container (the outer circle):

I am trying to change the background color of the circle segments on mouse hover. This functionality works as expected in Firefox and IE, but Chrome seems to be ignoring the overflow: hidden property of the parent container when hovering over them.

Here is the jsFiddle link for reference: http://jsfiddle.net/rFrcu/

Any suggestions or solutions would be greatly appreciated!

cssgoogle-chromehtmlcss-transforms

Answer №1

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='ja' xml:lang='ja'>
<head>
<title>artistic circle design</title>
<style type="text/css">
<!--
.node {
    position: absolute;
    width: 200px;
    height: 200px;
    background: purple;
    opacity: 0.8;
    border-radius: 50%;
}
.button {
    position: relative;
    height: 60%;
    width: 60%;
    left: 40%;
    top: 40%;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform-origin-x: 0px;
    -webkit-transform-origin-y: 0px;
    display: inline-block;
    line-height: 0px;
    overflow: hidden;
}
.button1 {
    -webkit-transform:rotate(30deg) skew(45deg);
    -moz-transform: rotate(30deg) skew(45deg);
    -ms-transform: rotate(30deg) skew(45deg);
    -o-transform: rotate(30deg) skew(45deg);
    transform: rotate(30deg) skew(45deg);
}
.button2 {
    -webkit-transform:rotate(120deg) skew(75deg);
    -moz-transform: rotate(120deg) skew(75deg);
    -ms-transform: rotate(120deg) skew(75deg);
    -o-transform: rotate(120deg) skew(75deg);
    transform: rotate(120deg) skew(75deg);
}
.circ {
    height: 180%;
    width: 180%;
    border-radius:100%;
    left: -90%;
    top: -90%;
    position: absolute;
}
.button1 .circ {
    background-color: pink;
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    transform: skew(-45deg);
}
.button2 .circ {
    background-color: orange;
    -webkit-transform: skew(-75deg);
    -moz-transform: skew(-75deg);
    -ms-transform: skew(-75deg);
    -o-transform: skew(-75deg);
    transform: skew(-75deg);
}
.circ:hover {
    background-color: lightblue;
}
-->
</style>
</head>
<body>
<div class="node">
  <div class="button button1">
    <div class="circ"></div>
  </div>
  <div class="button button2">
    <div class="circ"></div>
  </div>
</div>
</body>
</html>

Answer №2

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='ru' xml:lang='ru'>
<head>
<title>circle</title>
<style type="text/css">
<!--
.node {
    position: relative;
    width: 180px;
    height: 180px;
    background: blue;
    opacity: 0.9;
    border-radius: 50%;
}
.button {
    position: absolute;
    height: 50%;
    width: 50%;
    left: 50%;
    top: 50%;
    border-radius:0 0 100% 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform-origin-x: 0px;
    -webkit-transform-origin-y: 0px;
}
.button.button1 {
    background-color: red;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
.button.button2 {
    background-color: yellow;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}
.button.end {
    background-color: blue;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.button:hover {
    background-color: green;
}
.button.end:hover {
    background-color: blue;
}
-->
</style>
</head>
<body>
<div class="node">
  <div class="button button1"></div>
  <div class="button button2"></div>
  <div class="button end"></div>
</div>
</body>
</html>

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

Fixed headers and leftmost column in an HTML spreadsheet ensure optimal navigation and visibility

I need help creating a spreadsheet similar to Google Docs Spreadsheet or Excel, where there is a table full of data. How can I make it so that when a user scrolls vertically, the first row stays fixed, and when they scroll horizontally, the first column st ...

htmlcsstabular

Icon with label and border using Font Awesome

I'm looking to recreate this design using HTML and CSS: https://i.sstatic.net/LUgGW.png The icon I'm trying to replicate is actually from font awesome. Here's what I've accomplished so far: https://jsfiddle.net/0Lewug6p/1/ &l ...

htmlcssfont-awesome

HTML combined with Python coding allows for dynamic and interactive web

Can I incorporate Python scripts into HTML code, similar to how PHP is written between <?php ... ?> tags? I want to make sure my Python application can be executed in the browser. Thank you for any assistance! ...

pythonhtml

The main div element is experiencing an overflow due to the excessive

I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...

csshtml

Position elements to the right side of a flex container

I'm utilizing Bootstrap 4 along with this CSS class to vertically align my elements: .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-i ...

htmlcsstwitter-bootstrapflexboxtwitter-bootstrap-4

React is producing a collection of <td>'s

My React code is very straightforward and it runs smoothly: function Columns(){ return ( <React.Fragment> <li>Hello</li> <li>World</li> </React.Fragment> ); } function Example(){ ...

javascripthtmlreactjs

What are some alternative ways to create a text field with the same style as Material UI's without relying on the Material UI

With the power of HTML, CSS, and Reactjs I am aiming to create a functionality where the placeholder animates up to the border upon clicking on the text field An example can be seen with Material UI text field: https://material-ui.com/components/text-fie ...

htmlcssreactjsmaterial-ui

Introduction screen in a JQuery mobile application for Android devices

I'm currently working on an Android app that utilizes jQuery Mobile within my web-based application. I have multiple pages in the app and I am considering adding a splash screen to display when loading a new page or while the page is being loaded. Any ...

androidjqueryhtmljquery-uijquery-mobile

Creating an overlapping effect between a card deck and a carousel design

My goal is to create a website that resembles the design in this https://i.sstatic.net/WjaIE.png link. You'll notice there's currently a white background behind my yellow background and carousel. Is there a way to change the background color beh ...

htmlcssbootstrap-4

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1. I have a keen interest in both JavaScript and HTML coding. <a class="dropdown-item" href="{{ route('user.panel') }}"> User panel </a& ...

javascripthtmlcssbootstrap-4laravel-5.8

Exploring AngularJS: Implementing CSS media query for responsive screen resizing

I currently have a CSS code that triggers a message box through media query when the screen is resized to a specific size. I am looking for a way to make the message box disappear automatically after 5 seconds. Do you have any suggestions on how to achiev ...

cssangularjs

Problem with CSS dotted borders appearing as dashed in Chrome when applied to adjacent columns in a table

After testing the code on both Chrome and Firefox browsers, I noticed that they display the border differently. In Chrome, there is a dash in between adjacent cells while in Firefox, there are no dashes rendering. Can anyone suggest a solution to fix thi ...

htmlcssfirefoxgoogle-chromeborder

Issue with transition or animation not functioning when the element is positioned prior to the toggle

Why are only the elements after the toggle working in this code snippet that animates visibility? The ones before don't seem to be affected. Any ideas on why this behavior is occurring? I'm testing this code in the latest version of Chrome. ...

htmlcsscss-animationscss-transitionscss-transforms

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

I am working on a feature where posts are displayed using ng-repeat in a div, and users can enter new posts in an input box. The posts are sorted so that the latest one appears at the bottom. After adding a new post, I want to automatically scroll down t ...

javascriptjqueryhtmlcssangularjs

Tips for keeping a div fixed at a specific scroll level

Is there a way to keep a specific side div fixed at a particular scroll level, similar to the "How to format" bar on the right side of the Stack Overflow ask question page? You can see it when you try asking a question. How can this be achieved - with CS ...

jqueryhtmlcss

The Div element containing the rollover button/picture is failing to resize properly as the window is decreased in size

Whenever I try to resize my browser window in Firefox or Chrome, the div ends up moving instead of resizing. I've searched on stackoverflow for answers but haven't found any solutions yet. Can someone please help me with this issue? Here is what ...

htmlcssdreamweaver

Comparing currency to double in handlebars: a comprehensive guide

I've been working with Handlebars.js and encountered an issue when trying to compare product prices above $35. The problem arises from the fact that prices are stored as "$54.99" which gets treated as 0 when compared to a number. How can I effectively ...

htmlcsshandlebars.jsbigcommerce

The Python CGI script fails to run

While working on a simple python project with an HTML file, I stumbled upon a helpful tutorial that outlined how to execute the code. Check out the provided HTML code snippet: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ...

pythonhtmlcgi

jQuery uses variables within the .css() method

Having issues with the code I've written $('.item').each(function(){ var ItemGradient1 = $(this).attr('data-gradient-1'); var ItemGradient2 = $(this).attr('data-gradient-2'); var ItemGradient = 'linear-g ...

jquerycssvariables

Setting up pagination for displaying data from a database on the client-side: a step-by-step guide

Greetings to all my fellow programmers on Stack Overflow! I am currently in the process of developing an e-commerce application using JSP. The products for the application are stored in a server-side database (Mysql) within a table named product. The prod ...

jqueryhtmldatabasepaginationclient-server