0

Возникла проблема , а знаний пока не хватает и ответа найти не могу. Блоки как ссылки , у ссылок есть title. Между блоками абсолютно нет отступов , поэтому если появится title на блоке 1 , то при переходе на 2 блок , он сменится , но зависнет на 1 блоке.

Как сделать чтобы пропадал этот title при переходе с блока на блок ? Или отступ как сделать ? Менять CSS bootstrap-a или есть все таки что то ?

Вот кусок кода:

.col-lg-4{float:left;width:33.33333333%}
<div class="row">
  <a href="#" title="1 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">1 Блок</div></div></a>
  <a href="#" title="2 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">2 Блок</div></div></a>
  <a href="#" title="3 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">3 Блок</div></div></a>
</div>

1
  • отучитесь писать стили инлайн. то есть в строке вот так (style="height:60px;border:black 1px solid") это очень плохо. Такое написание стилей имеет верх над стилями в файле стилей. потом у вас же будет проблемы их перебить + это хламит и засоряет код.
    – Maxim
    19 июн 2017 в 14:05

2 ответа 2

1

Что то вы намудрили с блоками. почему див внутри ссылки с классами для размеров сетки? Так же если вы хотите что бы эти элементы были в ряд то не забывайте что в сетке всего 12 колонок, делим на 4 столбца, будет по 3. то есть класс col-lg-3 а не 4. и добавьте для меньших размеров тоже классы. Потому что поплывет верстка на меньших экранах. Либо если вы хотите что бы так отображалось на всех экранах то замените col-lg-* на col-xs-*

  <div class="row">
           <div class="col-lg-3 element" ><a href="#" title="1 Блок">1 Блок</a></div>
            <div class="col-lg-3 element" ><a href="#" title="1 Блок">1 Блок</a></div>
            <div class="col-lg-3 element" ><a href="#" title="1 Блок">1 Блок</a></div>
            <div class="col-lg-3 element" ><a href="#" title="1 Блок">1 Блок</a></div>
    </div>


    <style>
    .element{
        height:60px;
        border:black 1px solid;
    }
    </style>

Плюс учтите совет выше по тултипам. Получите.

 <div class="row">
       <div class="col-lg-3 element" ><a href="#" data-toggle="tooltip" data-placement="top" "title="1 Блок">1 Блок</a></div>
        <div class="col-lg-3 element" ><a href="#" data-toggle="tooltip" data-placement="top" "title="2 Блок">2 Блок</a></div>
        <div class="col-lg-3 element" ><a href="#" data-toggle="tooltip" data-placement="top" "title="3 Блок">3 Блок</a></div>
        <div class="col-lg-3 element" ><a href="#" data-toggle="tooltip" data-placement="top" "title="4 Блок">4 Блок</a></div>
</div>

и скрипт конечно же

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

Делал в слепую. Но по идее должно быть так же. Меньше кода. И должна пропасть проблема с отступами между блоками.

0

Если вы используете bootsrap, то можно использовать: data-toggle="tooltip".

<div class="row">
  <a href="#" data-toggle="tooltip" data-placement="top" "title="1 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">1 Блок</div></div></a>
  <a href="#" data-toggle="tooltip" data-placement="right" "title="2 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">2 Блок</div></div></a>
  <a href="#" data-toggle="tooltip" data-placement="bottom" "title="3 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">3 Блок</div></div></a>
  <a href="#" data-toggle="tooltip" data-placement="left" "title="3 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">3 Блок</div></div></a>
</div>

JS-script:

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.