2015-11-02 2 views
-1

Я хочу сделать визуальные эффекты на своей странице. Если пользователь наводится на div image-container, текст в следующем следующем элементе брака: image-hover должен быть виден. Но это не так. Может ли кто-нибудь посмотреть на мой код?Стиль от следующего элемента брата не работает

var cats = document.getElementsByClassName('image-container'); 
 
var lengte = cats.length; 
 

 
for (var i = 0; i < lengte; i++) { 
 

 
    cats[i].addEventListener('mouseover', function() { 
 
     var el = this.nextSibling.nextSibling; // this I do because the next sibling 
 
               // element is text. 
 
     el.style = 'display: block !importent'; 
 
    }); 
 
}
#img1 { 
 
    transition: scale(0.7); 
 
    -webkit-transform: scale(0.7); 
 
    -moz-transform: scale(0.7); 
 
    -ms-transform: scale(0.7); 
 
    -o-transform: scale(0.7); 
 
    top: -100px; 
 
    left: -90px; 
 
} 
 

 
img.clipped { 
 
    position: relative; 
 
} 
 

 
.image-container { 
 
    overflow: hidden; 
 
    height: 411px; 
 
} 
 

 
.image-hover { 
 
    display: none; 
 
    position: absolute; 
 
    top: -15px; 
 
    padding: 5px; 
 
    padding-top: 0; 
 
    background-color: rgba(255,255,255,0.7); 
 
}
<article class="col-lg-3 categorie"> 
 
    <div class="image-container"> 
 
     <img src="http://i.stack.imgur.com/vz8tG.jpg" class="clipped" id="img1"/> 
 
    </div> 
 
    <div class="image-hover"> 
 
     <h2><a href="/Topic?categorie=7&page=1">Wintersport</a></h2> 
 
     <p class="inhoud">Hou je van koude winters en sport? Dan is deze categorie zeker iets voor u! Hier kan je verschillende artikelen lezen van personen die verbleven op een winter ski oord. Je vind er ook vershillende indoor ski- en snowboard pistes.</p> 
 
     <hr /> 
 
     <p><b>Top vijf hot items</b></p> 
 
     <ul> 
 
       <li> 
 
        <a href="/Topic/Details?activiteit=24683"> 
 
         <span class="punten">0,5</span> 
 
         test41 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="/Topic/Details?activiteit=24676"> 
 
         <span class="punten">0,5</span> 
 
         test34 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="/Topic/Details?activiteit=24666"> 
 
         <span class="punten">0,4</span> 
 
         test24 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="/Topic/Details?activiteit=24696"> 
 
         <span class="punten">0,3</span> 
 
         test53 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="/Topic/Details?activiteit=24670"> 
 
         <span class="punten">0,3</span> 
 
         test28 
 
        </a> 
 
       </li> 
 
     </ul> 
 
    </div> 
 
</article>

Вот и результат от отладки моего кода.

+0

'this.nextSibling.nextSibling' является склонной подход ошибок – felipsmartins

ответ

2
el.style = 'display: block !importent'; 

есть опечатка в коде

Заменить importent с important

Смежные вопросы