Site title hover color conditional to background in section

Been using code to alter the hover colour of some of the elements on my website. 

.header--menu-open:hover #site-title{
    color: #e31d1a !important;
} 

for example, used the above to change it when the menu is open... 

The default hover colour for the title is #f9f9f9, which is also the colour of my pages background. Thi is not a problem on most sections of the homepage because the whole section is covered by an image. Tut there are two sections, though, without a full size image, and I would like the hover colour to change to grey when over these sections. 

This will also happen on the rest of the website's pages... Will need to code for it to change the hover colour on other pages too..

Anyone able to help?

Hi,

Can you share link to page where you have problem? We can take a look