Maxsus CSS formatlari bilan hover-dan foydalanish

O'zim yaratgan CSS piramida bo'lagi bilan ishlash uchun : hover ni olishda muammo yuzaga keldi. Shaffof chegaralarni va border-radius xususiyatidan foydalanmoqdaman. Biroq, hover holatida foydalanishga harakat qiladigan har qanday uslub faqat ishlamaydi. height: 0; va width: 0; ega bo`lgan div bilan aloqasi borligini taxmin qilaman, lekin buni qanday qilib tuzatish kerakligini bilmayman ... Mana mening kodim:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
</div> </div>
1

6 javoblar

I could narrow the solution, but not efficiently! I believe this will help you move further. Here is a fiddle for you : FIDDLE

Bu yerda UPDATED FIDDLE HTML

<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;}
1
qo'shib qo'ydi
Rahmat! Bu yaxshi ishlaydi.
qo'shib qo'ydi muallif Hudson Taylor, manba

I could narrow the solution, but not efficiently! I believe this will help you move further. Here is a fiddle for you : FIDDLE

Bu yerda UPDATED FIDDLE HTML

<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;}
1
qo'shib qo'ydi
Rahmat! Bu yaxshi ishlaydi.
qo'shib qo'ydi muallif Hudson Taylor, manba
  • You have added :hover to circle-1, but the problem here is circle-1 is at the bottom of the stack (circle-4 -> 3 -> 2 -> circle-1).
  • Try adding : hover to circle-4, it will work.

Siz xuddi shunday dizayni bir div bilan tuzishingiz mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
</div> </div>
1
qo'shib qo'ydi
  • You have added :hover to circle-1, but the problem here is circle-1 is at the bottom of the stack (circle-4 -> 3 -> 2 -> circle-1).
  • Try adding : hover to circle-4, it will work.

Siz xuddi shunday dizayni bir div bilan tuzishingiz mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
</div> </div>
1
qo'shib qo'ydi

Boshqa joylarda aytib o'tganimizdek, bu sodir bo'lmoqda. Buning sababi, sizda .circle-4 bilan bir-birining ustiga joylashtirilgan barcha div larning barchasi yuqori qismida o'tirishidir.

Agar bir oz qo'shimcha belgining qo'shilishiga qarshi bo'lmasangiz, div kodini qo'shish va CSS-ni sozlash bilan bir xil ta'sirga ega bo'lishingiz mumkin. Bu usulda faqatgina div ning barcha o'lchamlarini o'zgartirish uchun kerak bo'lgan qo'shimcha afzalliklarga ega.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

.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>
</div> </div>
0
qo'shib qo'ydi

Boshqa joylarda aytib o'tganimizdek, bu sodir bo'lmoqda. Buning sababi, sizda .circle-4 bilan bir-birining ustiga joylashtirilgan barcha div larning barchasi yuqori qismida o'tirishidir.

Agar bir oz qo'shimcha belgining qo'shilishiga qarshi bo'lmasangiz, div kodini qo'shish va CSS-ni sozlash bilan bir xil ta'sirga ega bo'lishingiz mumkin. Bu usulda faqatgina div ning barcha o'lchamlarini o'zgartirish uchun kerak bo'lgan qo'shimcha afzalliklarga ega.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

.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>
</div> </div>
0
qo'shib qo'ydi