Question

我确信这很简单我错过了，但是我无法使这个jQuery功能起作用。控制台中也没有出现任何错误。我希望当用户将鼠标悬停在图像上时显示文本。有人有机会发现我做错了吗？

HTML

 <div class="project-container">
     <img src="imgs/portfolio_hiburn.jpg">
          <div class="project-container__text">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
              </p> 
          </div>
 </div>

CSS

.project-container {
    width: 38.4688rem;
    height: 28.9rem;
    position: relative;
    overflow: hidden;
}

.project-container__text {
    padding: 2rem;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
    background: #63b9ce; 
    color: #fff;
}

.project-display {
    display: inline;
    z-index: 1;
}

JQUERY

$(document).ready(function(){

    $('.project-container').mouseover(function(){
        $('.project-container__text').addClass(('.project-display'), function(){
            $('.project-display').slideUp();
        });
    });

});

Answer 1

从添加类中删除(和.：

.addClass('project-display'),

您在(方法中添加了额外的addClass()大括号，此方法不接受任何选择器，只接受字符串值。所以你不必在那里放.。

要添加一件事，你必须使用this关键字在选择器的给定上下文中获取元素：

$(this).find('.project-container__text').addClass('project-display')

Answer 2

你走了！问题是你不应该添加＆＃39;。＆＃39;当使用addClass或removeClass函数时。还建议使用.on（＆＃39; mouseover＆＃39;）进行回调。

https://jsbin.com/wowuyuzaqo/edit?html,css,js,output

Answer 3

    private static SessionHeader header = new SessionHeader();
    private static AssignmentRuleHeader assignHeader = new AssignmentRuleHeader();
    private static MruHeader mruHeader = new MruHeader();
    private static AllowFieldTruncationHeader allowField = new    AllowFieldTruncationHeader();
    private static DisableFeedTrackingHeader disableFeed = new DisableFeedTrackingHeader();
    private static StreamingEnabledHeader streamingHeader = new StreamingEnabledHeader();
    private static AllOrNoneHeader allOrNoneheader = new AllOrNoneHeader();
    private static DuplicateRuleHeader duplicateHeader = new DuplicateRuleHeader();
    private static LocaleOptions localeOptions = new LocaleOptions();
    private static DebuggingHeader debugHeader = new DebuggingHeader();
    private static PackageVersion[] packVersion;
    private static EmailHeader emailHeader = new EmailHeader();
    private static LimitInfo[] limitInfo;
    private static SaveResult[] saveResult;

Answer 4

您必须更改CSS类分配的方式：

$(document).ready(function(){
    $('.project-container').mouseover(function(){
        $('.project-container__text').addClass('project-display');
        $('.project-display').slideUp();
    });
});

This is your code running in fiddle

您应该考虑将样式类应用于jquery项目，您必须具有以下格式

可以一次添加多个类，以空格分隔   匹配元素的集合，如下所示：$( "p" ).addClass( "myClass yourClass" );

此方法通常与.removeClass（）一起用于切换元素＆＃39;   从一个到另一个的类，如下所示：$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

这里，从所有段落中删除myClass和noClass类，   而yourClass被添加。从jQuery 1.4开始，使用.addClass（）方法   参数可以接收函数。
$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});
给定一个包含两个<li>元素的无序列表，此示例添加了   class＆＃34; item-0＆＃34;到第一个<li>和＆＃34; item-1＆＃34;到了第二个。

参考：addClass Jquery Doumentation

jQuery鼠标悬停效果

4 个答案: