如何在鼠标使用其中一个时连接两个不同元素的淡入淡出效果

Question

我在背景中有一张图片，上面有一个按钮。我想应用两个淡入淡出效果：当鼠标在按钮上时，它的不透明度降低，图像不透明度应该增加。 我知道只用一个元素应用淡入淡出效果，但我不知道如何同时应用它们。

示例：查看此link 中的效果，但它们应该在鼠标位于其标题而不是图像时激活，同时标题不透明度从 1 变为 0.3。

.domicilio {
    width:10%; 
    text-align:center; 
    padding:5px;
    position: relative;
    margin-left: 7%;
}

.domicilio img {
...
}

.domicilio button{
    position: absolute;
    top: 50%;
    left: 165%;


    
    /*Aspetto*/

    font-family: OldEnglish;
    background-color: #803c25;
    color: #FFC107;
    border-color: #FFC107;
    font-size: 30px;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 5px;
}

.domicilio button:hover{
    opacity: 0.3;
    transition: 0.3s;
}

<div class="domicilio">
                        <img src="...">
                        <a href="https://www.google.it">
                            <button>I'm dissappearing, the image behind me should light up</button>
                        </a>
</div>

Answer 1

我相信一些 CSS 专家可能会通过纯 CSS 找到解决方案，但为了讨论，这里是使用 jquery 的示例。

请注意，您需要首先在 CSS 中的图像上添加第一个状态 css 不透明度，以便在第一次悬停时运行。然后你可以改变鼠标悬停的状态。

您可以在此处阅读有关悬停效果的信息：https://api.jquery.com/hover/ 以及有关更改 CSS https://api.jquery.com/css/

希望这会有所帮助，我相信 Baby Yoda 很高兴。

$( "#fade" ).hover(
  function() {
  $( "#img" ).css( "opacity", "1" );
  $( "#img" ).css( "transition", "0.3s" );
  }, function() {
      $( "#img" ).css( "opacity", "0.3" );
      $( "#img" ).css( "transition", "0.3s" );
  }
);

.domicilio {
    width:10%; 
    text-align:center; 
    padding:5px;
    position: relative;
    margin-left: 7%;
}

.domicilio img {
max-width: 400%;
opacity: 0.3;
transition: 0.3s;
}

.domicilio button{
    position: absolute;
    top: 50%;
    left: 165%;


    
    /*Aspetto*/

    font-family: OldEnglish;
    background-color: #803c25;
    color: #FFC107;
    border-color: #FFC107;
    font-size: 30px;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 5px;
}

.domicilio button:hover{
    opacity: 0.3;
    transition: 0.3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="domicilio">
                        <img id="img"src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
                        <a href="https://www.google.it">
                            <button id="fade">I'm dissappearing, the image behind me should light up</button>
                        </a>
</div>

编辑：

ON 用户请求纯 JS 解决方案。

document.getElementById("fade").onmouseover = function() 
{
    document.getElementById("img").style.opacity = "1";
    document.getElementById("img").style.transition = "0.3s";
}
document.getElementById("fade").onmouseleave = function() 
{
    document.getElementById("img").style.opacity = "0.3";
    document.getElementById("img").style.transition = "0.3s";
}

.domicilio {
    width:10%; 
    text-align:center; 
    padding:5px;
    position: relative;
    margin-left: 7%;
}

.domicilio img {
max-width: 400%;
opacity: 0.3;
transition: 0.3s;
}


.domicilio button{
    position: absolute;
    top: 50%;
    left: 165%;


    
    /*Aspetto*/

    font-family: OldEnglish;
    background-color: #803c25;
    color: #FFC107;
    border-color: #FFC107;
    font-size: 30px;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 5px;
}

.domicilio button:hover{
    opacity: 0.3;
    transition: 0.3s;
}

<div class="domicilio">
                        <img id="img"src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
                        <a href="https://www.google.it">
                            <button id="fade">I'm dissappearing, the image behind me should light up</button>
                        </a>
</div>