Exploring the Possibilities of Combining Hover Effects with Unique CSS

I'm encountering difficulties making the :hover state work with a CSS pie slice that I created. Using transparent borders and the border-radius property, I managed to style my div to resemble 1/4 of a pie. But no matter what styles I attempt for the hover effect, they just won't take hold. I suspect that the issue lies in the fact that the div has height: 0; and width: 0;, but I'm unsure how to resolve this... Here is the code snippet:

div {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
height: 0;
  border-radius: 50%;
}
.circle-1 {
  border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
  border-top: 50px solid green;
}
.circle-1:hover {
  border-top: 50px solid pink;
  cursor: pointer;
}
.circle-2 {
  border-left: 50px solid transparent;
border-right: 50px solid red;
border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}
.circle-3 {
  border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
  border-top: 50px solid transparent;
}
.circle-4 {
  border-left: 50px solid orange;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>

htmlcss

Answer №1

While I was able to narrow down the solution, it wasn't the most efficient method. I hope this at least gives you a starting point for further progress. Check out this fiddle: FIDDLE

UPDATE: Here's an UPDATED FIDDLE with additional HTML code.

<div><div class="circle-1"></div>
<div class="circle-2"></div><div class="clear"></div>
<div class="circle-3"></div>
<div class="circle-4"></div></div>

CSS

.circle-1{
    float:left;
    width: 90px;
    height: 90px;
    background: red;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 90px 0 0 0;
    }
    .circle-2 {
      float:left;
    width: 90px;
    height: 90px;
    background: black;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 90px 0 0;
    }
    .circle-3 {
      float:left;
    width: 90px;
    height: 90px;
    background: green;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 0 0 90px;
    }
    .circle-4 {
      float:left;
    width: 90px;
    height: 90px;
    background: blue;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 0 90px 0;
    }


    .circle-1:hover{
      float:left;
    width: 90px;
    height: 90px;
    background: orange;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 90px 0 0 0;
    }
    .circle-2:hover {
      float:left;
    width: 90px;
    height: 90px;
    background: pink;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 90px 0 0;
    }
    .circle-3:hover {
      float:left;
    width: 90px;
    height: 90px;
    background: brown;
    -moz-border-radius: 90px 0 0 0;
    -webkit-border-radius: 90px 0 0 0;
    border-radius: 0 0 0 90px;
    }
    .circle-4:hover {
      float:left;
      width: 90px;
      height: 90px;
      background: purple;
     -moz-border-radius: 90px 0 0 0;
     -webkit-border-radius: 90px 0 0 0;
     border-radius: 0 0 90px 0;
    }

    .clear{clear:both;}

Answer №2

  • The issue arises when adding :hover to circle-1 as it is positioned at the bottom of the stack (circle-4 -> 3 -> 2 -> circle-1).
  • To resolve this, consider applying :hover to circle-4 instead.

A similar design can be achieved using just one div element.

div {  
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
height: 0;
  border-radius: 50%;
}
.circle-1 {
  border-left: 50px solid orange;
border-right: 50px solid red;
border-bottom: 50px solid blue;
  border-top: 50px solid green;
}
.circle-1:hover {
  border-top: 50px solid pink;
  cursor: pointer;
}
<div class="circle-1"></div>

Answer №3

It's worth noting that the current situation is occurring because all four div elements are stacked on top of each other, with .circle-4 positioned at the top.

To achieve the same result without much hassle, you could add a wrapping div and make some CSS adjustments. This approach offers the advantage of only needing to modify the parent divs dimensions to resize the entire structure.

.circles{
  border-radius:50%;
  font-size:0;
  height:100px;
  margin:0 auto 10px;
  overflow:hidden;
  transform:rotate(45deg);
  width:100px;
}
.circles>div{
  display:inline-block;
  padding-top:50%;
  transition:background .15s linear;
  width:50%;
}
.circle-1{
  background:green;
  cursor:pointer;
}
.circle-2{
  background:red;
}
.circle-3{
  background:blue;
}
.circle-4{
  background:orange;
}
.circles>div:hover{
  background:pink;
}
<div class="circles">
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>
</div>

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

PHP code to verify the presence of a file on a distant server

Currently, I am facing difficulties in finding a PHP script that will help me retrieve the contents of a txt file stored on a remote server and then store it in a variable. The challenging part is not outputting to a variable but rather reading and accessi ...

phphtmltext-files

Utilizing Dojo to apply additional styles to an already existing class when a customized sorting feature is implemented on an improved

How can I dynamically add sort arrows (up/down) to a dojo enhanced Grid without using CSS? var mygrid = new EnhancedGrid({ id: "grid", store: gridStore, structure: gridStructure, canSort : function(index){ alert(index); } }, ...

javascriptcssdojo

Navigation issues in Internet Explorer appear to be causing problems

I've been working on a new website template design and decided to incorporate a click navigation menu for added functionality (with a javascript fallback for accessibility). I found the menu design on Toddmotto.com and it worked perfectly in most bro ...

jquerycssnavigation

Is it possible to convert xaml to html in a silverlight newsletter?

Currently, I am working on a project that involves creating a webpage where my admin can send emails directly through the website. To achieve this functionality, I have implemented a code snippet to send emails to all subscribers. foreach (Subscription pe ...

c#htmlsilverlightemailxaml

Can HTML variables be accessed in lines of code before they are declared in HTML?

In line 1 of my code, I am trying to access the rowData variable which is declared in the second HTML line. However, I keep getting the error message "Property 'rowData' does not exist on type 'AppComponent'" for that line. Strangely, t ...

htmlangulartypescriptprimeng

Creating a CSS layout with three columns where the first column's width is unspecified and the second

I am looking to create a three column layout with specific width requirements. The first column should adjust based on content, the second column should fill the space between the first and third columns, and the third column should have a fixed width. Add ...

htmlcss

What could be causing my click event to only fire once upon generating HTML, but function properly when using console.log?

It seems to be functioning correctly in the console, as well as when generating HTML. However, it only seems to work once with HTML, while it consistently works with the console. Should I consider using a loop here and returning the HTML in that manner? I ...

javascripthtmlajaxdomevents

Use flexbox to arrange labels and input fields in a single line for better display

I've been working on a project where I need to lay out labels and input fields on separate lines using flexbox. <form class="form"> <label> Credit Card Number </label> <input type="searc ...

htmlcssflexbox

dragging and dropping files for easy upload

Here is a challenge I am facing: I am looking for a solution that allows users to drag multiple images from their local file system onto the flash/flex/html5 app. The app should then extract the file name details and communicate with the server. Once t ...

flashapache-flexhtmlfile-upload

Active Arrow Link

I'm currently working on customizing the appearance of my WordPress site's categories sidebar by adding an arrow to the left side of the active link. After tweaking the CSS to achieve the desired behavior and making some color adjustments for te ...

phpcsswordpresshtml-listsnav

The functionality to organize items appears to be malfunctioning. (Javascript)

I want to add a price sorting feature that allows users to sort by either 'high to low' or 'low to high' using a drop-down menu. The products I want to sort are the w3-containers, each representing a different product. However, nothin ...

javascripthtmljquerysorting

What is preventing me from using header() to redirect to the page?

There seems to be an issue with the URL redirection. Instead of redirecting to Activated.php, it is currently showing http://localhost/SP/activation.php/Activated.php instead of http://localhost/SP/Activated.php. <?php require 'db.php'; $msg= ...

phphtml

CSS files that are isolated are not functioning properly for EditForm Inputs

Suppose I have the elements below on a MyComponent.razor file: <label class="form-label" for="myInput">Text Field</label> <InputText class="form-control" id="myInput" @bind-Value="@Something" ...

cssasp.netblazor

How can I override the maximum body width to enable specific div elements to extend beyond that limit?

While I've come across similar questions to mine, none of them seem to solve my specific issue. Essentially, I've set the body width to 960px, which is a common standard practice. However, there are certain elements such as header, footer, and so ...

htmlcss

Optimizing Content Display for Android Screens

Although I have successfully optimized my site for OS and iOS, testing it on Android devices using browserstack.com has presented a challenge when it comes to targeting them with media queries. This is the query that I currently use for iOS devices: #uti ...

cssmedia-queries

A commonly used method to adjust the width of a table column to accommodate the size of the child element

I have a specific table width of 776 pixels with three columns. The third column has a fixed width of 216 pixels, but the widths of the other two are unknown. I want the second column to adjust its width based on its content, and whatever space is left aft ...

htmlcss

What could be the reason for the <ul> and <li> tags showing up on my website's DOM?

I'm attempting to showcase cards on my webpage, but the text I'm displaying contains some code snippets like the one illustrated below: <div class="app"> <h1> All Fishes and Their Photos</h1> <ul v-for="(fi ...

javascripthtmlcssvue.jshtml-lists

What is the best way to create some flexibility in my HTML button by adjusting the padding or margin?

I am dynamically generating Controls and including them in a Web Part. Whenever I execute this: this.Controls.Add(new LiteralControl("<br />")); Button btnSave = new Button(); btnSave.Text = "Save"; btnSave.Click += new EventHandler(btnSave_Click); ...

c#html

How to conceal table cells on Safari 5?

My code works on Firefox and IE, but not on Safari. Here's an example: <table> <thead> <tr> <th style="display: none;">hi</th> </tr> </thead> <tr class="someClass"> <td style= ...

htmlcsssafari

Adding a <tr> tag to an HTML table using JQuery and AJAX in the context of Django framework step by step

I am currently navigating the world of Javascript, Jquery, and Ajax requests and I'm encountering a challenge with how my scripts are executing. My homepage contains a lengthy list of items (over 1200) that need to be displayed. Previously, I loaded ...

javascripthtmljquerydjangoajax