Как связать эффект затухания двух разных элементов, пока мышь работает с одним из них

Question

У меня есть изображение на заднем плане и кнопка над ним. Я хочу применить два эффекта затухания: когда мышь находится в кнопке, ее непрозрачность уменьшается, а непрозрачность изображения должна увеличиваться. Я знаю, как применить эффект затухания только с одним элементом, но я не знаю, как применить их к обоим.

ПРИМЕР: посмотрите эффекты в этой ссылке , но они должны активировать, когда указатель мыши находится над заголовком, а не над изображением, а прозрачность заголовка изменяется с 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/

Надеюсь, это поможет, я ' Я уверен, что малышка Йода доволен.

$( "#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>

РЕДАКТИРОВАТЬ:

ПО запрос пользователя чисто 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>