Как я могу добавить эффект подсветки за пределами области выделения с помощью CSS?

jquery css css3

113 просмотра

3 ответа

Я делаю рамку, похожую на концепцию ниже, при наведении курсора мыши она будет показывать другие кнопки и иметь эффект подсветки за пределами области выделения: эффект выделения с помощью CSS

Так как же мне добиться этого, чтобы добавить эффект подсветки за пределами области выделения, используя только чистые CSS или jquery?

Автор: user3077416 Источник Размещён: 08.11.2019 11:25

Ответы (3)


1 плюс

Решение

Решение 1 (с jQuery):

HTML:

<div class="box">text</div>
<div class="box">text</div>
<div class="box">text</div>
<div class="box">text</div>

CSS (только для этого примера):

.box{
    transition:.3s;
    background: #fff;
    text-align: center;
    padding: 2%;
    margin: 2%;
    width: 17%;
    float: left;
}
.box.fade{
    opacity: 0.3;
    transition: .3s;
}

JQuery:

$('.box').on('mouseenter', function() {
    $('.box').not($(this)).addClass('fade');
});

$('.box').on('mouseleave', function() {
    $('.box').not($(this)).removeClass('fade');
});

Рабочий пример: https://jsfiddle.net/k71fqn4o/1/

Решение 2 (чистый CSS):

Если у вас есть контейнер для ваших ящиков, так что вы можете использовать это решение, но решение 1 безопаснее.

HTML:

<div class="container">
    <div class="box">text</div>
    <div class="box">text</div>
    <div class="box">text</div>
    <div class="box">text</div>
</div>

CSS (только для этого примера):

.box{
    transition:.3s;
    background: #fff;
    text-align: center;
    padding: 2%;
    margin: 2%;
    width: 17%;
    float: left;
}
.container:hover .box{
    opacity: 0.3;
    transition: .3s;
}

.box:hover{
    opacity: 1 !important;
}

Рабочий пример: https://jsfiddle.net/ogvudr5t/

Автор: Mohammad Reza Размещён: 20.08.2016 02:29

0 плюса

Вы можете добиться эффекта выделения, используя box-shadowсвойство CSS (и соответствующие префиксы поставщиков). Другие элементы также могут быть уменьшены с помощью :hoverпсевдо-селектора и animateправила. Попробуй это:

div {
  width: 150px;
  height: 150px;
  background-color: #EEE;
  border: 1px solid #EEE;
  border-radius: 5px;
  transition: border, box-shadow 0.2s;
  padding: 5px;
}
div button {
  opacity: 0;
  transition: opacity 0.2s;
}
div:hover {
  border-color: #66afe9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
div:hover button {
  opacity: 1;
}
<div>
  <button>Foo</button>
</div>

Автор: Rory McCrossan Размещён: 20.08.2016 02:27

-2 плюса

Коробка-тень должна сделать свое дело.

Автор: antidecaf Размещён: 20.08.2016 02:24
Вопросы из категории :
32x32