Jak zmienić wygląd jednego div-a po najechaniu na drugi

Witajcie

Mam 2 divy zagnieżdżone w jednym:

<div class="home_item1">
<div class="home_item1_transparent-part"></div>
<div class="home_item1_desc">ROLNICTWO</div>
</div>

Po najechaniu na div z napisem, tło tego bloku zmienia kolor. Czy wie ktoś jak zrobić tak, aby po najechaniu na przezroczysty blok, również kolor bloku drugiego się zmieniał?

Będę wdzięczny za pomoc.

Kod css:

div.home_item1 {
	background-color: #ABCDEF;
	background-image: url(http://localhost/katalog-firm1/wp-content/uploads/2015/07/home-rolnictwo.bmp);
	height: 400px; width: 400px;
	
	position: relative;
	float: left;
	z-index: 2;
}
div.home_item1_transparent-part {
	width: inherit;
	height: 340px;
}
div.home_item1_desc  {
	padding: 20px 0 0 0 ;
	background-color: #7C7EE6;
	height: 40px;
	width: 400px;
	color: #fff;
	font-weight: bold;
	font-size: 14pt;
	opacity: 0.8;
	
	z-index: 3;
	position: absolute; 
	top: 340px;
	overflow: hidden;
}
div.home_item1_desc:hover {
	background-color: red;
	opacity: 0.8;
}

Zrób :hover na .home_item1

http://jsfiddle.net/kqL44vah/2/

Tutaj masz przyklad. Warto pamietac,ze taka metoda dziala jezeli zachodzi jakas relacja (ktora jestes w stanie okreslic za pomoca selektora) pomiedzy jednym, a drugim div'em.

Pewnie znajdzie sie taka sytuacje, gdzie ww. metoda zawiedzie, wiec:

(".target").on({
     mouseenter: function() {
         $(".divInAnotherUniverse").css(...);
     },
     mouseleave: function() {
         $(".divInAnotherUniverse").css(...);
     }
});

Dzięki za odpowiedź. Czy mógłbyś jeszcze wytłumaczyć swój fragment kodu JS, gdyż kompletnie go nie ogarniam?

Generalnie to jQuery. Dodalem ten kod razem z $, ktorego zapomnialem na poczatku http://jsfiddle.net/kqL44vah/3/.
.on() dodaje event handler w tym wypadku podczas najechania myszy i gdy mysz zjedzie z div'a korzystamy z kolejnej funkcji jQuery .css(), ktora po prostu dodaje style do naszego elementu. Rownie dobrze mozemy tam dodac (tak samo jak mouseenter i mouseleave) click keyPress itd.