Блог

Главная - Вопросы по программированию - Я хотел добавить свойство контура только для зависшего элемента, а не для родительских элементов

Я хотел добавить свойство контура только для зависшего элемента, а не для родительских элементов

#html #css

Вопрос:

Я хотел добавить свойство дополнительно к часам, поэтому добавил свойство эффекта типа контура .
Но всякий раз, когда я наведу курсор на элемент, свойство наведения родительского элемента также активируется . Знайте, что это эффект пузырьков/захвата типа в JS, а также то, как работает CSS.

Plz CSS только по возможности : может быть, JS можно использовать так

 onhover="func()"

getElementId().style.boxShadow = " "

нужно добавить к каждому элементу

Возможно ли иметь свойство контура только для зависшего элемента .

Любые предложения по улучшению недвижимости для outline-radius или outline effect with radius очень необходимы

Спасибо за помощь

 #clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

#clockOuterCircle:hover {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

#clockInnerCircle {
  position: relative;
  width: 38vw;
  height: 38vw;
  text-align: center;
  padding: 0%;
  border-radius: 50%;
  border: 6px solid black;
  background-color: white;
}

#clockInnerCircle:hover {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockStyleCircle:hover {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

#clockStyleEyeCircle1 {
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: 24%;
  left: 10%;
  border: 3px solid black;
  border-radius: 50%;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
  /* inset 16px 0px #777, inset 16px 0px 1px 2px #777;*/
  background-color: black;
}

#clockStyleEyeCircle2 {
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: 24%;
  left: 65%;
  border: 3px solid black;
  border-radius: 50%;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
  background-color: black;
}

#clockStyleSimileCircle {
  position: absolute;
  width: 8vw;
  height: 3vw;
  top: 68%;
  left: 25%;
  border: 3px solid rgb(36, 36, 36);
  /* border-radius: 0 0 50% 50% /  0 0 100% 100%; */
  border-bottom-left-radius: 100% 200%;
  border-bottom-right-radius: 100% 200%;
  background-color: black;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
}

#clockCenterDot {
  position: absolute;
  width: 4%;
  height: 4%;
  top: 48%;
  left: 48%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0);
  box-shadow: 3px 3px 10px;
  z-index: 4;
}

#hourNeedle {
  position: absolute;
  height: 30%;
  width: 2%;
  top: 20%;
  left: 49%;
  background-color: rgb(0, 0, 0);
  border-radius: 5px 5px 0 0;
  box-shadow: 3px 3px 10px;
  z-index: 1;
}

#minuteNeedle {
  position: absolute;
  height: 38%;
  width: 1.6%;
  top: 12%;
  left: 49.2%;
  background-color: rgba(0, 0, 0);
  border-radius: 5px 5px 0 0;
  box-shadow: 3px 3px 10px;
  z-index: 2;
}

#secondNeedle {
  position: absolute;
  height: 46%;
  width: 1%;
  top: 8%;
  left: 49.5%;
  background-color: rgba(0, 0, 0);
  border-radius: 5px 5px 0 0;
  box-shadow: 3px 3px 10px;
  z-index: 3;
} 
 <div id="clockOuterCircle">
  <div id="clockInnerCircle">
    <div id="clockStyleCircle">
    </div>
    <div id="clockCenterDot"></div>

  </div>
</div>

Комментарии:

1. Не могли бы вы, пожалуйста, взглянуть на это . Это может помочь

2. Да, это первый способ, о котором я подумал, но затем изменился, потому что нужно добавить :not() все элементы . Как добавлю на час мин сек. руку .

3. :not() JS это мое последнее оружие, если возможно, иначе я пойду твоим путем @HarshitRastogi

4. Может быть, этот подход ребенка-брата и сестры может помочь вам jsfiddle.net/k3Zdt/11

5. Пожалуйста, четко объясните, что должно отличаться от того, как ваш фрагмент в настоящее время отображается, потому что в настоящее время я не могу сказать, чего именно вы здесь хотите.

Метки: ,