Question

我的问题简介：

因此，我正在尝试创建一个与图形设计有关的Portfolio网站，并且我需要将整个SVG和PNG（我知道我需要注意快速加载，但它们确实很轻）分别放在不同的位置层（z索引），首先是因为我将使每个对象具有交互性，然后是因为某些对象将具有混合模式。网站按钮将具有悬停过渡。我的问题是我有一个纹理层，它占据了所有页面空间，并且具有一种颜色混合混合模式，并且必须停留在按钮上方才能对其进行混合，因此按钮的悬停操作不起作用。为了解决这个问题，我在纹理层上方制作了一个按钮的div副本（无文本），因此可以使链接区域可以单击，然后编写变量以使按钮悬停动画。

我的目标和尝试：

我的目标仅仅是使btn_name悬停时获得字体粗体“ bold”和混合混合模式“ overlay”，而btn_name也由其上方的png图层混合。我试图在纹理层上方创建一个可单击的div，但似乎不起作用，该变量根本就没有变化，可能是因为z-index函数。

HTML

<!--    BUTTON NAME    -->
<!--    -----------    -->
        <div class="btn_link"></div>
        <div id="name"> 
            <a hred="" class="btn_name">HUBERT DUNGEN</a>
        </div>

<!--    BG STRUCTURE    -->
<!--    ------------    -->
    <div class=bgstruct>
        <div id=bgtexture><img src="bgs/homepage/PNG/Asset%2041.png"></div>
    </div>

CSS

这是标题代码：

:root{
    --d:100;
}

/*<!--    HEADER    -->*/
/*<!--    ------    -->*/
header
{
    background-image: url(bgs/homepage/SVG/Asset%2039_BG.svg);
    height: 100vh;
    background-size: cover;
    background-position: center;
    z-index: -3;
    position: relative;
    width: 100vw;
}

这是按钮代码：

/*<!--    BODY    -->*/
/*<!--    ----    -->*/
body
{
    font-family: monospace;
    --c:8%;
}


/*<!--    NAME BTN    -->*/
/*<!--    --------    -->*/
.btn_link
{
    margin: auto;
    width: 33vw;
    padding: 2% 9px 1% 8px;
    position: absolute;
    bottom: var(--c);
    left: 0;
    right: 0; 
    z-index: 1;
}   


#name
{
    z-index: -2;
    margin: auto;
    width: 33vw;
    padding: 2% 9px 1% 8px;
    position: absolute;
    bottom: var(--c);
    left: 0;
    right: 0;
    mix-blend-mode: overlay;
    font-weight: var(--d);

}

.btn_name
{
    text-transform: uppercase;
    font-family: "Raleway", sans-serif;
/*    font-weight: var(--d);*/
    font-size: 4vw;
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center;
    transform: translate(0%,-50%);
/*    mix-blend-mode: overlay;*/
    transition: all 0.2s;

}

.btn_link:hover
{
    cursor: pointer;
    transition: all 0.2s;
    --d:bold;
}

/* I even tried this and it doesn't work...
.btn_link .btn_name
{
    --d:100;
}

.btn_link:hover .btn_name
{
    --d:bold;
}
*/

现在背景纹理结构是

/*<!--    BG STRUCTURE    -->*/
/*<!--    ------------    -->*/
.bgstruct
{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    mix-blend-mode: color-dodge;
}

#bgtexture img
{
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100vw;
    height: 100vh;
    display: block;
}

我正在乞求建立网站，并且我还在学习一些东西，抱歉给我这么大的解释，但是我不知道另一种解释方法。该网站尚在开始。看一下草图：忽略徽标底部，它将只是“ HUBERT DUNGEN”字样，而不是一个交互式按钮。该按钮将是带有以下假定代码的代码（它将切换到其他div：

.btn_name:hover
{
    cursor: pointer;
    transition: all 0.2s;
    mix-blend-mode: luminosity;
    font-weight: var(--d);
}

当中间有带有z-index的div时，如何使用悬停功能影响其他div？

0 个答案: