首页 \ 问答 \ jQuery悬停功能，切换不起作用(jQuery hover function with toggle not working)

jQuery悬停功能，切换不起作用(jQuery hover function with toggle not working)

 我有以下代码，它应该切换div的背景和一些p而它没有，我无法弄清楚为什么。 你能帮忙吗？  
 jQuery的  
$(document).ready(function(){
    $("div.portfolio-img").hover(
        function(){
            $(this).toggleClass(".portfolio-img-hover");
            $(this).find("h5.excerpt-title").toggleClass(".excerpt-title-hover");
            $(this).find("p.portfolio-excerpt").toggleClass(".portfolio-excerpt-hover"); 
        }
      )
});
 
 HTML  
<div class="portfolio-img">
    <a href="#single_project"><img src="images/thumbnail.jpg"/></a>
    <h5 class="excerpt-title">First Title</h5>
    <p class="portfolio-excerpt">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum                Lorem ipsum Lorem ipsum</p>
</div>
 
 CSS  
h5.excerpt-title{
    margin:30px 0px 5px;
    transition:background-color 0.5s ease;
}

.excerpt-title-hover{
    opacity:1;
    color: #ed0b0b;
}

.portfolio-excerpt-hover{
    opacity:1;
    background:#e2e2e2;
}

.portfolio-img-hover{
    opacity:1;
    background:#e2e2e2;
    border-bottom:2px solid #ed0b0b;
}

.portfolio-img{
    width:220px;
    display:inline-block;
    padding:15px 5px;
    margin:0px 5px 10px;
    opacity:0.6;
    border-bottom:1px solid grey;
    transition:background-color 0.5s ease;
    background-color:#ffffff;
}
 
 Jsfiddle在这里： http ： //jsfiddle.net/a12b0u0k/ 

I have the following code that's supposed to toggle the background of a div and some p and it doesn't and I can't figure out why. Can you please help? 
jQuery 
$(document).ready(function(){
    $("div.portfolio-img").hover(
        function(){
            $(this).toggleClass(".portfolio-img-hover");
            $(this).find("h5.excerpt-title").toggleClass(".excerpt-title-hover");
            $(this).find("p.portfolio-excerpt").toggleClass(".portfolio-excerpt-hover"); 
        }
      )
});
 
HTML 
<div class="portfolio-img">
    <a href="#single_project"><img src="images/thumbnail.jpg"/></a>
    <h5 class="excerpt-title">First Title</h5>
    <p class="portfolio-excerpt">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum                Lorem ipsum Lorem ipsum</p>
</div>
 
CSS 
h5.excerpt-title{
    margin:30px 0px 5px;
    transition:background-color 0.5s ease;
}

.excerpt-title-hover{
    opacity:1;
    color: #ed0b0b;
}

.portfolio-excerpt-hover{
    opacity:1;
    background:#e2e2e2;
}

.portfolio-img-hover{
    opacity:1;
    background:#e2e2e2;
    border-bottom:2px solid #ed0b0b;
}

.portfolio-img{
    width:220px;
    display:inline-block;
    padding:15px 5px;
    margin:0px 5px 10px;
    opacity:0.6;
    border-bottom:1px solid grey;
    transition:background-color 0.5s ease;
    background-color:#ffffff;
}
 
Jsfiddle here: http://jsfiddle.net/a12b0u0k/

原文：https://stackoverflow.com/questions/26004402

更新时间：2022-01-24 15:01

最满意答案

<ItemTemplate>
    <div class="Question">
        <asp:RadioButtonList runat="server" Visible='<%# Eval("QuestionType").ToString() == "YesNo" %>' >
            <asp:ListItem Value="True" Text="Yes" />
            <asp:ListItem Value="False" Text="No" />
        </asp:RadioButtonList>
        <asp:RadioButtonList runat="server" Visible='<%# Eval("QuestionType").ToString() != "YesNo" %>' >
                <asp:ListItem Value="1" Text="1" />
                <asp:ListItem Value="2" Text="2" />
                <asp:ListItem Value="3" Text="3" />
                <asp:ListItem Value="4" Text="4" />
                <asp:ListItem Value="5" Text="5" />
        </asp:RadioButtonList>
    </div>
</ItemTemplate>

<ItemTemplate>
    <div class="Question">
        <asp:RadioButtonList runat="server" Visible='<%# Eval("QuestionType").ToString() == "YesNo" %>' >
            <asp:ListItem Value="True" Text="Yes" />
            <asp:ListItem Value="False" Text="No" />
        </asp:RadioButtonList>
        <asp:RadioButtonList runat="server" Visible='<%# Eval("QuestionType").ToString() != "YesNo" %>' >
                <asp:ListItem Value="1" Text="1" />
                <asp:ListItem Value="2" Text="2" />
                <asp:ListItem Value="3" Text="3" />
                <asp:ListItem Value="4" Text="4" />
                <asp:ListItem Value="5" Text="5" />
        </asp:RadioButtonList>
    </div>
</ItemTemplate>

jQuery悬停功能，切换不起作用(jQuery hover function with toggle not working)

最满意答案

相关问答

如何将HTML发送到ASP.Net Repeater以取决于来自存储过程的值？(How to get HTML sent to ASP.Net Repeater to depend on a value from Stored Procedure?)[2021-10-21]

在If语句中的ASP.Net Repeater评估(ASP.Net Repeater Eval in an If statement)[2022-03-08]

ASP.NET Repeater中的javascript函数(javascript function in ASP.NET Repeater)[2023-05-22]

ASP.NET转发器与FancyBox内联HTML(ASP.NET Repeater with FancyBox Inline html)[2023-01-07]

如何在ASP.net中使用Repeater(How to use Repeater in ASP.net)[2024-02-02]

ASP.NET中继器(ASP.NET Repeater)[2023-03-19]

如果在ASP.NET Repeater中有条件(If condition in ASP.NET Repeater)[2023-03-31]

Repeater的存储过程 - 从表中选择列(Stored procedure for Repeater - Select columns from table)[2021-09-25]

ASp.Net GridView使用存储过程进行更新(ASp.Net GridView Updating using a stored procedure)[2023-04-30]

C＃/ ASP.NET - 带有HTML选择的Repeater(C#/ASP.NET - Repeater with a HTML select)[2022-03-22]

相关文章

最新问答