CODEWITHSUNDEEP
jqueryhtmlcssdrupal-7
Finduilas
Finduilas

Reputation: 742

Click/ Hover doesn't not trigger

I have a problem with links. I can't click a link in a paragraf. Seems the browser doesn't trigger the hover (chrome / firefox / ...) on even rows. I can't see any reason why. I can't find something about the z-index, wrong margins, code in the ::after,.. (or I doesn't see it).

I use bootstrap and drupal-7. Normally drupal has the ability to change the block on hover. This doesn't work neither. I guess this is the same problem I can't click the links.

Example hover ability drupal

Code

Example of 2 rows, first row triggers the hover, second row doesn't trigger it.

<div class="container-fluid rowStyle">
  <div class="container">
    <section id="sociale media" class="block block-block col-md-4 contextual-links-region">
      <div class="container-fluid">
        <h4 class="text-center block-title">Sociale media</h4>
        <div class="contextual-links-wrapper contextual-links-processed">
          <a class="contextual-links-trigger" href="#">Instellen</a>
          <ul class="contextual-links">
            <li class="block-configure first last"><a href="/admin/structure/block/manage/block/6/configure?destination=node">Blok instellen</a></li>
          </ul>
        </div>
        <div class="content text-center">
          <div class="front-icon">
            <div class="circle-background">&nbsp;</div>
            <div class="icon-symbol fa fa-hashtag">&nbsp;</div>
          </div>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        </div>
      </div>
    </section>
    <section id="nieuwsbrief" class="block block-block col-md-4 contextual-links-region">
      <div class="container-fluid">
        <h4 class="text-center block-title">Nieuwsbrief</h4>
        <div class="contextual-links-wrapper contextual-links-processed">
          <a class="contextual-links-trigger" href="#">Instellen</a>
          <ul class="contextual-links">
            <li class="block-configure first last"><a href="/admin/structure/block/manage/block/7/configure?destination=node">Blok instellen</a></li>
          </ul>
        </div>
        <div class="content text-center">
          <div class="front-icon">
            <div class="circle-background">&nbsp;</div>
            <div class="icon-symbol fa fa-newspaper-o">&nbsp;</div>
          </div>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        </div>
      </div>
    </section>
    <section id="video's" class="block block-block col-md-4 contextual-links-region">
      <div class="container-fluid">
        <h4 class="text-center block-title">Video's</h4>
        <div class="contextual-links-wrapper contextual-links-processed">
          <a class="contextual-links-trigger" href="#">Instellen</a>
          <ul class="contextual-links">
            <li class="block-configure first last"><a href="/admin/structure/block/manage/block/8/configure?destination=node">Blok instellen</a></li>
          </ul>
        </div>
        <div class="content text-center">
          <div class="front-icon">
            <div class="circle-background">&nbsp;</div>
            <div class="icon-symbol fa fa-video-camera">&nbsp;</div>
          </div>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        </div>
      </div>
    </section>
  </div>
</div>
<div class="container-fluid rowStyle">
  <div class="container">
    <section id="leerlingenvervoer" class="block block-block col-md-4 contextual-links-region">
      <div class="container-fluid">
        <h4 class="text-center block-title">Onderweg...</h4>
        <div class="contextual-links-wrapper contextual-links-processed">
          <a class="contextual-links-trigger" href="#">Instellen</a>
          <ul class="contextual-links">
            <li class="block-configure first last"><a href="/admin/structure/block/manage/block/17/configure?destination=node">Blok instellen</a></li>
          </ul>
        </div>
        <div class="content text-center">
          <div class="front-icon">
            <div class="circle-background">&nbsp;</div>
            <div class="icon-symbol fa fa-bus">&nbsp;</div>
          </div>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        </div>
      </div>
    </section>
    <section id="veelgestelde vragen" class="block block-block col-md-4 contextual-links-region">
      <div class="container-fluid">
        <h4 class="text-center block-title">Veelgestelde vragen</h4>
        <div class="contextual-links-wrapper contextual-links-processed">
          <a class="contextual-links-trigger" href="#">Instellen</a>
          <ul class="contextual-links">
            <li class="block-configure first last"><a href="/admin/structure/block/manage/block/18/configure?destination=node">Blok instellen</a></li>
          </ul>
        </div>
        <div class="content text-center">
          <div class="front-icon">
            <div class="circle-background">&nbsp;</div>
            <div class="icon-symbol fa fa-question">&nbsp;</div>
          </div>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        </div>
      </div>
    </section>
    <section id="zij helpen mee..." class="block block-block col-md-4 contextual-links-region">
      <div class="container-fluid">
        <h4 class="text-center block-title">Zij helpen mee...</h4>
        <div class="contextual-links-wrapper contextual-links-processed">
          <a class="contextual-links-trigger" href="#">Instellen</a>
          <ul class="contextual-links">
            <li class="block-configure first last"><a href="/admin/structure/block/manage/block/19/configure?destination=node">Blok instellen</a></li>
          </ul>
        </div>
        <div class="content text-center">
          <div class="front-icon">
            <div class="circle-background">&nbsp;</div>
            <div class="icon-symbol fa fa-users">&nbsp;</div>
          </div>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        </div>
      </div>
    </section>
  </div>
</div>

Extra information

I added a link under the section Sociale Media. You can see a little difference in the text color.

What could be wrong ?

Upvotes: 1

Views: 68

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

You have a z-index problem that prevent the hover from being triggered ,

in your sbsdevlieger.min.css (line 811) set the z-index to 0

.rowStyle:nth-child(even) {
    ....
    z-index:0;
    ....
}

Upvotes: 1

Related Questions