Помещение изображения поверх элемента для его отображения выбрано

Question

Мне нужно представить, что пользователь выбрал опцию при нажатии на какой-либо элемент.

У меня есть сетка маленьких шариков, вот так:

. . . .
. . . .
. . . .
. . . .

Я использовал div с border-radius для представления каждого шара и пытался добавить фоновое изображение, когда на них есть класс .active (добавленный через JS). Но изображение вырезано div, поэтому мне нужен другой способ.

Я структурировал сетку так: 1 сетка> (строка> (шарики) * 4) * 4). Изначально у меня 5 рядов и 10 шаров на ряд. Скорректированы значения в соответствии с примером здесь.

Проблема в том, что когда мяч выбран, он должен показывать одно изображение больше, чем div, и увеличение размера шара - не вариант для меня. Я хочу найти лучший подход к этой проблеме .

before == . -- AFTER CLICK --> X(custom image over the ball)

Как я должен сделать это упрощенно? Используя JS и CSS, все возможно. Поскольку действие является обратимым (переключаемым), мне также нужен способ удаления.

< Сильный > Tl ; р

Как показать, что шар выбран, поместив изображение (любой элемент HTML или трюк CSS) над этим шаром при нажатии.

Скрипка примера: https://jsfiddle.net/f25nLw3k/

Возиться с ответом:

https://jsfiddle.net/f25nLw3k/2/ благодаря @Omer

javascript jquery html css

2

cassioscabral 17 Дек 2015 в 20:06

Answer 1

Ну, я думаю, у меня есть решение в том же коде.

Я просто добавил две строки в ваш JS и написал scss, чтобы сделать div div position: relative

$('.ball.active').on('click', function(e) {
    var node = $(e.target);
    node.removeClass('active');
    node.find('.bigger-ball').remove();
})

$('.ball').on('click', function(e) {
    var node = $(e.target);

  $('.ball.active').each(function(e) {
    $(this).removeClass('active');
    $(this).find('.bigger-ball').remove();
  });


  node.addClass('active');
  node.append('<span class="bigger-ball"></span>');
});

Вот ссылка JS Fiddle: https://jsfiddle.net/omerblink/f25nLw3k/3/

Вы можете заменить <span class="bigger-ball"></span> на <img> :)

2

Omer 17 Дек 2015 в 18:12

Answer 2

Это можно сделать с помощью CSS и Javascript.

Просто переключите класс active каждого ball. Определите ball для полей, а active ball - нет.

.ball {
    margin: 10px;
    width:1px;
    background: black;
}

.ball.active {
    margin: 0;
    width: 11px;
    background: url(/path/to/img);
}

0

Nachshon Schwartz 17 Дек 2015 в 17:24

Answer 3

Это можно сделать с помощью фоновых изображений. Если изображение слишком большое, вы можете установить background-size: cover;

JQuery:

// If you click on a cell
$('.column').click(function() {
    // Remove the active class from all cells
    $('.column').removeClass('active');
    // Give this cell the active class
    $(this).addClass('active');
});

CSS:

.column {
  background-image: url('default.png');
  background-size: cover;
}

.column.active {
  background-image: url('active.png');
}

< Сильный > JSFIDDLE : https://jsfiddle.net/na7pehLn/3/

1

TFischer 17 Дек 2015 в 17:31

Помещение изображения поверх элемента для его отображения выбрано

3 ответа

Похожие вопросы

Новые вопросы

javascript