Question

我正在创建自己的WordPress主题，遇到一些我认为与WordPress不相关的问题，而更多与jQuery相关的问题。

因此，在我的脚本中，我使用了.hover（）函数。当我在网站上试用时，并非所有人都可以使用，并且在执行某些操作时它会更改（例如，当我右键单击“检查元素”并且Google Chrome DevTools打开时，它们都可以正常使用。关闭它，其中只有两个起作用...）。

我也在使用Owl Carousel插件，所以也许与此有关。我目前有两个不同的轮播，当我将它们悬停时，应该显示某些文本（css有效）。实际上，只有第一个轮播项目会在悬停时显示文本。

我要添加一些代码进行澄清。

jQuery

jQuery(document).ready(function($) {
    function slidercalc() {
        $('.slider').each(function(i,obj) {
        // some code
        $(this).hover(function() {
            $(this).find(".slider-text").css('height', 'calc(100% - ' + $(this).find(".slider-title").outerHeight() + 'px)');
        }, function() {
            $(this).find(".slider-text").css('height', '0');
        });
    }
slidercalc();
$(window).resize(slidercalc);
});

.slider元素表示“猫头鹰轮播”中的一个项目。 HTML 看起来像这样。

<div class="owl-item active">
<div class="slider">
<a href="/">
    <img srcset="
        /896x504.jpg 896w,
        /640x360.jpg 640w,
        /320x180.jpg 320w
    " sizes="
        (min-width: 640px) 896px,
        (min-width: 320px) 640px,
        320px
    " oncontextmenu="return false;">
    <div class="slider-title">Title of this image</div>
    <div class="slider-text" style="bottom: 88px; height: 0px;">
        <span>vr 29 juni 2018</span>
        <p style="max-height: calc(100% - 54px);">Text supposed to showing up on hovering.</p>
    </div>
</a>
</div>
</div>

在.slider-text和.slider-text p处添加的内联样式的发生是因为使用jQuery，我相信这是正确的。

jQuery .hover（）仅部分起作用

0 个答案: