Question

好吧，所以我对编码知之甚少。我已经工作了几个小时来定制页面，我取得了实质性进展。然而，在过去的三个小时里，我再一次打了个嗝。

我开始使用带有大边栏图像的页面代码。我想要做的，并且仍然想要做的是，使图像褪色，使其更暗，文字渐渐消失。我已经设法让图像按照我想要的方式淡出，并且我已经让页面的文本和标题正确淡入。但问题是不透明度。

这是我多次见过的一个问题，但没有一个答案对我有用。大多数时候，我看到人们说他们的侧边栏是他们的文本的父母。我不认为这是我的问题，因为边栏和文本，在这个例子中称为描述，每个都有自己的

我已经看到文本的不透明度不会因侧边栏的不透明度而改变，但是，当我进行此更改时，它会完全弄乱页面。描述在随机位置关闭，链接消失或最终在页面的另一端。

我不确定问题是什么，我会喜欢一些帮助，因为除了观看权力的游戏之外，我一整天都在工作。我会喜欢任何可用的帮助，我现在非常绝望，而且我在挖掘编码方面的耐心已经很薄了。提前感谢大家阅读！

以下是编码：

    /*  Sidebar  */

    #sb {
        width: 550px;
        position: fixed;
        height: 100%;
        z-index: 1;
        margin: 30px 0 0 0;
    }

    #sidebar {
        width: 500px;
        height: 100%;
        padding-top: 297px;
        background: url({image:Sidebar bg}) no-repeat;
        float: left;
          opacity:1;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
        transition:all 1s ease-in-out;
    }

    #sidebar:hover{
        opacity:.3;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
        transition:all 1s ease-in-out;
    }

    #sb_border {
        float: right;
        width: 50px;
        height: 100%;
        min-height: 900px;
        background: {color:Lines};
        padding-top: 250px;
    }


    #title {
        margin-left: 35px;
        text-align: left;
        font-family:josefin sans;
        font-size: 24px;
        color: {color:Blogtitle};
        text-shadow: 1px 1px 1px {color:Blogtitle textshadow};
        letter-spacing: 0;
        margin-bottom: 10px;
         opacity:0;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
        transition:all 1s ease-in-out;
    }

    #title:hover {
        opacity:1;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
        transition:all 1s ease-in-out;
    }

    #description {
        width: 235px;
        margin-left: 35px;
        color: {color:Description};
        font-size: 8px;
        text-align: left;
        line-height: 10px;
        margin-bottom: 10px;
        text-transform: uppercase;
        opacity:0;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
        transition:all 1s ease-in-out;
    }

    #description:hover {
        opacity:1;
        -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;
        transition:all 1s ease-in-out;
    }

    #desc b {
        font-size: 10px;
    }

    #menu {
        width: 50px;
        text-align: center;
        font-size: 8px;
        font-weight: bold;
    }

    #menu a:link, #menu a:visited, #menu a:active {
        text-transform: uppercase;
        display: inline-block;
        color: {color:Menulink};
        margin-bottom: 5px;
        width: 50px;
        padding: 4px 0;
        border-bottom: 1px solid transparent;
    }

    #menu a:hover {
        color: {color:Menulink hover};
        border-bottom: 1px solid {color:Menulink hover border};
        background: {color:Menulink hover bg};
    }

    #pagination {
        text-align: center;
        font-size: 14px;
    }

    #pagination a:link, #pagination a:visited {
        margin: 5px 0;
    }









    <!-- Custom CSS -->
    <style type="text/css" media="screen">
        {CustomCSS}


    </style>

    <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

</head>

<body>
  <!-- Sidebar -->


<div id="sb">


<div id="sidebar">


    <div id="title">{Title}</div>
    <div id="description">{Description}</div>

   </div>


<div id="sb_border">

    <div id="menu" style="margin-bottom: 5px;">
        <a href="/">home</a><br />
        <a href="/ask">askbox</a><br />
        {Block:ifShowLink1}<a href="{text:link1 url}">{text:link1}</a><br />
        {/Block:ifShowLink1}
        {Block:ifShowLink2}<a href="{text:link2 url}">{text:link2}</a><br />
        {/Block:ifShowLink2}
        {Block:ifShowLink3}<a href="{text:link3 url}">{text:link3}</a><br />
        {/Block:ifShowLink3}
        {Block:ifShowLink4}<a href="{text:link4 url}">{text:link4}</a><br />
        {/Block:ifShowLink4}
        {Block:ifShowLink5}<a href="{text:link5 url}">{text:link5}</a>
        {/Block:ifShowLink5}
    </div></div>

    <div id="pagination">
        {block:Pagination}
        {block:PreviousPage}<a href="{PreviousPage}">«</a>&nbsp;
        {/block:PreviousPage}
        {block:NextPage}<a href="{NextPage}">»</a>
        {/block:NextPage}
        {/block:Pagination}
    </div>
 </div>

 </div>

Answer 1

你的问题在于定位。您需要定位<div id="description">...</div>，使其位于<div id="sidebar">...</div>之上。

对于＆＃34;侧边栏＆＃34;您也不需要:hover财产。仅适用于＆＃34;说明＆＃34;。

我为你做了一个JSFiddle示例：Click here并将鼠标悬停在图像上以查看效果。

如果您有任何问题，请与我们联系。

CSS Image Hover淡入淡出，不包括文本

1 个答案: