Скрыть текст на основе CSS-условных выражений с помощью JavaScript

Question

Есть ли способ использовать инструкцию if для JavaScript, чтобы скрыть элементы CSS на основе других стилей CSS? Я работаю в SharePoint, и я применяю некоторые CSS-коды к изображению, которое у меня есть с некоторым текстом с фоном в верхней части его. Это изображение имеет эффект зависания/анимации, и я хотел бы скрыть текст и фон, когда начнется эффект наведения. Что-то вроде if(image3.opacity="1") then(h2, h2 span, h2 span.spacer)=hide. Я новичок в javascript, поэтому я был бы очень признателен за вашу помощь!

CSScode я сделал до сих пор является следующим:

#image3 { 
opacity: 0.4; 
filter: alpha(opacity=40); 
box-shadow: 0px 0px 15px grey; 
alt: missing; 
    transition-property: opacity; 
    transition-duration: .2s; 
} 
#image3:hover { 
    opacity: 1.0; 
    filter: alpha(opacity=100); 
} 
.image { 
    position: relative; 
    width: 100%; 
} 
h2 { 
    position: absolute; 
    bottom: 50px; 
    left: 5px; 
    width: 100%; 
} 
h2 span { 
    color: white; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: 0px; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.6); 
    padding: 9px; 
} 
h2 span.spacer { 
    padding:0 5px; 
    background: rgba(0, 0, 0, 0); 
} 

Answer 1

Если вы в состоянии ухватить и прикрепить библиотеку JQuery, следующие должен работать.

if ($("#image3").css("opacity") == "1") { 
    $("h2").hide(); 
    $("h2 span").hide(); 
    $("h2 span.spacer").hide(); 
} 

Answer 2

Вы можете использовать только CSS, в зависимости от того, как ваши элементы расположены в DOM. Предполагая, что здесь, что h2 является родственный #image3:

#image3:hover + h2, 
#image3:hover + h2 span, 
#image3:hover + h2 span.spacer { 
    display: none; 
} 

Если вы хотите элементы исчезать, вместо того, чтобы просто исчезнуть, вы могли бы использовать непрозрачность и переход:

#image3 + h2, 
#image3 + h2 span, 
#image3 + h2 span.spacer { 
    opacity: 1; 
    transition: opacity 150ms ease 1s; /* 1s delay */ 
} 

#image3:hover + h2, 
#image3:hover + h2 span, 
#image3:hover + h2 span.spacer { 
    opacity: 0; 
}