Я работаю над проектом, где мне нужно изменить стиль индикации элемента, когда выбран другой элемент в той же строке. Я также должен сделать наложение видимым для всех других элементов, кроме выбранного элемента.jQuery изменение выбранного стиля элемента на другой выбор
Прямо сейчас у меня есть рабочий код, который выделяет выбранный элемент и создает оверлей, но мой недостаток опыта вызывает у меня путаницу в том, как сделать эту работу упомянутой выше. Вот код для справки.
$(".prod_link").bind('click', function(){
$(this).find("img").addClass('glow');
$(this).parent().parent().find(".after").css("display", "block");
});
.prod_thumb{height: 100px; width: 100px;}
.prod_thumb:hover{
\t margin: 10px auto;
\t height: 95px;
\t width: 95px;
\t background-color: #cd1041;
\t -webkit-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
\t -moz-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
\t box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
\t -webkit-transition: all 0.3s ease-out;
\t -moz-transition: all 0.3s ease-out;
\t -ms-transition: all 0.3s ease-out; /* IE10 is actually unprefixed */
\t -o-transition: all 0.3s ease-out;
\t transition: all 0.3s ease-out;
}
.glow {
\t margin: 5px auto;
\t height: 95px;
\t width: 95px;
\t background-color: #cd1041;
\t -webkit-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
\t -moz-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
\t box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
}
.image-container { position: relative; }
.image-container .after { position: absolute; top: 5px; width: 95px; height: 95px; display: block; background: rgba(255, 255, 255, .6); }
.image-container .after:hover{opacity: 0; transition: 0.3s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-2 image-container">
\t <a data-toggle="modal" data-target=".prod_modal" class="prod_link">
\t \t <img src="img/kitchen/cookware2.jpg" class="img-responsive prod_thumb"/>
\t <div class="after" style="display: none;"></div>
</a>
</div>
<div class="col-sm-2 image-container">
\t <a data-toggle="modal" data-target=".prod_modal" class="prod_link">
\t <img src="img/kitchen/cookware3.jpg" class="img-responsive prod_thumb"/>
<div class="after" style="display: none;"></div>
</a>
</div>
<div class="col-sm-2 image-container">
\t <a data-toggle="modal" data-target=".prod_modal" class="prod_link">
\t \t <img src="img/kitchen/cookware4.jpg" class="img-responsive prod_thumb"/>
\t <div class="after" style="display: none;"></div>
</a>
</div>
<div class="col-sm-2 image-container"> \t \t \t \t \t \t \t \t \t
\t <a data-toggle="modal" data-target=".prod_modal" class="prod_link">
\t <img src="img/kitchen/cookware5.jpg" class="img-responsive prod_thumb"/>
\t <div class="after" style="display: none;"></div>
\t </a>
</div>
</div>
Любая помощь будет принята с благодарностью.