1. Ставить изначальный бордер под цвет фона, а при наведении красить;
2. Ставить сначала padding в ширину бордера, при наведении добавлять бордер и убирать padding
3. Ставить не бордер, а outline или shadow.
@k_filatov кроме того, что я б фиксировала ширину области, где выбранное слово, чтобы она не прыгала, мне кажется, все правильно)
но вам наверное, надо, чтобы все время по центру было среднее слово? Если да, то изначальный отступ надо ставить по центру, т.е. задавать css
{
top: 50%,
margin-top: -(высота ul-селектлиста)/2
}
или
{
top: (рассчитанный фиксированный отступ, равный величине высоты одного li)
}
и не менять ее при выборе, т.е. это не надо
var top_count = $(this).index();
var li_height = $('.select__list li').height();//ну они конечно в этом случае одинаковыми должны быть
$('.select__list ul').css('top',-(top_count*li_height)+'px');
эти строчки я писала с учетом того, что выбранный элемент должен находиться всегда на уровне результата, а так можно просто фиксированно установить сдвиг через css
и еще надо дописать сюда
$('.select__list').click(function(){
$('.select__list ul').hide(); <--- это, чтобы открытой был только один select в одно время
$(this).find('ul').show();
});
если даже с позицией center top не совпадает, то
сделайте тогда нижний блок не только на высоту волны, но и полностью весь контент с квадратами, а бекграунд высокая такая png во всю длину блока и ширину одной волны
map.setCenter([lat, lon]);