Question

我有以下代码，它应该显示段落的内容，但它不起作用：

的jQuery

 <script>
 $(document).ready(function () {
     $('.portfolio-excerpt').hover(function () {
         $('.portfolio-text').addClass('portfolio-hover')
     },
     function () {
         $('.portfolio-text').removeClass('portfolio-hover')
     })
 })
 </script>

HTML

<div class="portfolio-img"> <a href="images/portfolio-big.jpg"><img src="images/thumbnail.jpg"/></a>
    <p class="portfolio-excerpt">They say the only thing better.</p>
    <p class="portfolio-text">Lorem ipsum</p>
</div>

CSS

.portfolio-hover {
    display:block;
}
p.portfolio-excerpt {
    display:block;
    height:30px;
    width:auto;
}
p.portfolio-text {
    display:none;
}

这不起作用，我不知道为什么。你能帮忙吗？

Answer 1

包含p标记以提高特异性，因为.class的特异性低于tag.class。

p.portfolio-excerpt {
    display:block;
    height:30px;
    width:auto;
}
p.portfolio-text {
    display:none;
}
p.portfolio-hover {
    display:block;
}

另一种方法是从其他人那里移除p，如果不需要的话。

此外，您可以更新CSS，使其更具体（使用多个类）：

.portfolio-text.portfolio-hover {
     display:block;
}

你也可以＆＃34;强迫＆＃34;它使用important。

.portfolio-hover {
     display:block !important;
}

如果这些都不起作用，请重新考虑您的订购（嘿，有些人讨厌important或.multi.classnames - 我明白了。

最后，您可以使用toggleClass来切换现有的课程。

$(this).next().toggleClass('portfolio-text');

以下是一个例子：http://jsfiddle.net/neknhp8p/

Answer 2

您需要做的就是更改CSS声明。

p.portfolio-text{
    display:none;
    }

p.portfolio-excerpt{
    display:block;
    height:30px;
    width:auto;
}

p.portfolio-hover{
    display:block;
}

这是工作页面 - ＆gt; JSFIDDLE

您忘记在p之前添加.portfolio-hover，并将其放在样式的末尾。多数民众赞成。

Answer 3

一些相关的事情 - 这是你的css。

首先是订单：

.portfolio-hover {
    display:block;
}
/* this comes later in the css, it will override the hover */
p.portfolio-text {
    display:none;
}

所以解决它：

p.portfolio-text {
    display:none;
}
.portfolio-hover {
    display:block;
}

但是p.portfolio-text比.portfolio-hover更具体，因此仍然会被覆盖 - 因此最终修复：

p.portfolio-text {
    display:none;
}
p.portfolio-hover {
    display:block;
}

Answer 4

试试这个：

$(document).ready(function () {
    $('.portfolio-excerpt').hover(function () {
        $(this).next().addClass('portfolio-hover')
    },
    function () {
        $(this).next().removeClass('portfolio-hover')
    })
})

或只使用.show()和.hide()：

$(document).ready(function () {
    $('.portfolio-excerpt').hover(function () {
        $(this).next().show();
    },
    function () {
        $(this).next().hide();
    })
})

<强> Fiddle Demo

Answer 5

问题在于CSS的样式是如何应用的，因为一个类的定义并没有覆盖另一个类。像这样改变你的风格：

.portfolio-hover {
    display:block !important;
}

或者，您可以更加具体地使用选择器的定义：

.portfolio-text.portfolio-hover {
    display:block;
}
/** OR **/
p.portfolio-hover {
    display:block;
}

<强>解释

有一个元素{c}所在的class="classA classB"：

.classA {
    css-property: css-value1;
}

.classB {
    css-property: css-value2;
}

由于元素classA属性的排序，css-property classB优先于class，因此会导致{{1}} {{1}}优先于{{1}}。通过以一种覆盖另一种方式的方式实现样式来解决问题。 See here for more information on CSS precedence.

Answer 6

请将两个段落与另一个div一起包装，以确保消失将是顺利的。

切换功能更改显示从none到block，从block到none到sss div内的所有p标记。

HTML：

<div class="portfolio-img"> <a href="images/portfolio-big.jpg"><img src="images/thumbnail.jpg"/></a>
    <div class="sss">
        <p class="portfolio-excerpt">They say the only thing better.</p>
        <p class="portfolio-text">Lorem ipsum</p>
    </div>
</div>

JS：

<script>
    $(document).ready(function () {
         $('.sss').hover(function () {
             $('.sss').children('p').toggle();
         });
    });
</script>

CSS：

<style>
.portfolio-hover, .portfolio-text {
    display:block;
}
p.portfolio-excerpt {
    display:block;
    height:30px;
    width:auto;
}
p.portfolio-text {
    display:none;
}
</style>

jQuery悬停功能不起作用，不知道为什么

6 个答案: