CSS 图像悬停淡入淡出，不包括文本-6ren

CSS 图像悬停淡入淡出，不包括文本

转载作者：行者123 更新时间：2023-11-28 10:25:40

好吧，我对编码知之甚少。我已经工作了几个小时来定制一个页面，而且我取得了实质性的进展。然而，在过去的三个小时里，我又遇到了一个小问题，它一直在帮助我度过难关。

我开始使用带有大侧边栏图像的页面代码。我想做的，并且仍然想做的，是使图像变淡，使其更暗，文字在上面淡化。我已经设法让图像按照我的意愿淡入淡出，并且我已经让页面的文本和标题正确淡入。不过，问题在于不透明度。

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

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

我不确定问题出在哪里，我希望得到一些帮助，因为除了观看《权力的游戏》之外，这就是我一整天的工作。我会喜欢任何可用的帮助，在这一点上我非常绝望，我自己在挖掘编码方面的耐心已经很薄弱了。预先感谢大家的阅读!

代码如下:

    /*  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>