I need help hiding an element when hovering over another non child/parent/sibling element

I'm a beginner when it comes to javascript and I'm trying to write a script to hide a class when I hover over another class. I've written this piece of code however it isn't working as I'd like it to.Could someone give me some pointers as to why this code isn't working and some advice on how to get it to achieve the results I'm looking for.

$(document).ready( function () {
"use strict";
document.getElementsByClassName('nav-bar').onmouseover = function(){

    document.getElementsByClassName('site-title').style.display="none";
};

document.getElementsByClassName('nav-bar').onmouseout = function(){

    document.getElementsByClassName('site-title').style.display="inline";
};

});