下一个兄弟元素的风格不起作用

Question

我想在我的页面上制作视觉效果。如果用户悬停在div image-container上，则必须显示下一个下一个同级元素image-hover中的文本。但它并没有。任何人都可以查看我的代码吗？

＆＃13;

＆＃13;

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';
    });
}

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这也是调试我的代码的结果。

Answer 1

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

您的代码中存在拼写错误

将importent替换为important