Question

我一直在Asp.net的论坛上工作，我遇到的问题是，当我用鼠标光标悬停在我的div上时，它会从不透明度到下划线文本完成所有细节，但是当我将光标移离div它不会回到之前的状态'正常状态'。

我在普通的html页面上构建我的代码，一切正常，当我将它集成到我的Asp.net模板中时，它开始做这个bug。我知道它可能是很多东西，我检查了模板的所有CSS，一切看起来很好，他们应该没有冲突，但我一定错过了一些东西。我不能把所有代码都放在CSS和HTML的很多行中，所以这里是它的一部分。希望你们能给我一些指导。

CSS

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#content {
    background-color: white;
    margin-top: 15px;
    padding: 10px;
    height: 1200px;
}

    #content h2 {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size: 23px;
        color: black;
        margin: 0;
        margin-top: 10px;
    }

    #content p {
        font-family: "Tahoma", Arial, Helvetica, sans-serif;
        font-size: 13px;
        padding-left: 15px;
        margin: 0;
        width: 90%;
    }



.forum-group {
    width: 948px;
    height: 259px;
    margin-left: auto;
    margin-right: auto;
}

.header-2 {
    width: 948px;
    height: 35px;
}

.child-forum {
    width: 310px;
    height: 106px;
    float: left;
    background-image: url('images/forum-child-background2.jpg');
    opacity: 0.9;
    filter: alpha(opacity=90);
    margin-left: 6px;
    margin-bottom: 4px;
    border-radius: 10px;
}

    .child-forum:hover {
        opacity: 1.0;
        filter: alpha(opacity=100);
    }

.child-forums {
    width: 948px;
    height: 219px;
}

.forum-link {
    width: 309px;
    height: 106px;
    display: inline-block;
}

.forum-icon {
    width: 60px;
    height: 60px;
    display: inline-block;
    background-image: url('images/hot_forum.png');
}

.forum-details {
    width: 220px;
    height: 43px;
    display: inline-block;
}

.forum-title {
    width: 217px;
    height: 18px;
    display: inline-block;
    color: white;
    font-size: 16px;
    margin-left: 10px;
}

.forum-desc {
    width: 217px;
    height: 15px;
    display: inline-block;
    color: grey;
    font-size: 12px;
    margin-left: 10px;
}

HTML内容页

<%@ Page Title="" Language="C#" MasterPageFile="~/masterPage.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="aspnetw24prise2.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" href="css/skel.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-desktop.css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div id="content">
        <br /><br />
        <div class="forum-group">
            <h2 class="header-2">Community</h2>
            <ul class="child-forums">
                <li class="child-forum">
                    <a class="forum-link" href="#">
                        <span class="forum-icon"></span>
                        <span class="forum-details">
                            <span class="forum-title">General Discussion</span>
                            <span class="forum-desc">Discuss about cars</span>
                        </span>
                    </a>
                </li>
                <li class="child-forum">
                    <a class="forum-link" href="#">
                        <span class="forum-icon"></span>
                        <span class="forum-details">
                            <span class="forum-title">Latest News</span>
                            <span class="forum-desc">Talk about new stuff</span>
                        </span>
                    </a>
                </li>
                <li class="child-forum">
                    <a class="forum-link" href="#">
                        <span class="forum-icon"></span>
                        <span class="forum-details">
                            <span class="forum-title">Rules</span>
                            <span class="forum-desc">Important for new members</span>
                        </span>
                    </a>
                </li>
                <li class="child-forum">
                    <a class="forum-link" href="#">
                        <span class="forum-icon"></span>
                        <span class="forum-details">
                            <span class="forum-title">Events</span>
                            <span class="forum-desc">Stay in touch</span>
                        </span>
                    </a>
                </li>
                <li class="child-forum">
                    <a class="forum-link" href="#">
                        <span class="forum-icon"></span>
                        <span class="forum-details">
                            <span class="forum-title">Media</span>
                            <span class="forum-desc">Videos & pictures</span>
                        </span>
                    </a>
                </li>
                <li class="child-forum">
                    <a class="forum-link" href="#">
                        <span class="forum-icon"></span>
                        <span class="forum-details">
                            <span class="forum-title">FAQ</span>
                            <span class="forum-desc">Get answers</span>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
</asp:Content>

Answer 1

只是想检查一下......你有'.child-forum'设置'不透明度：0.9'。这与悬停的不透明度几乎相同。

将'.child-forum'设置为0并仔细检查它是否真的无效。可能只是很难说。（？）

Asp.net Css Hover bug

1 个答案: