change class attributes when hovering over other css class - class

Question

I am trying to give a div with class "left2" a border-radius when class "left1_sub" is hovered.
I´ve searched a lot of solutions, but nothing seems to work for me.
The html to it: http://web318.login-11.hoststar.at/ben/kleinraum/wp/menuimg/index.html
and the full css: http://web318.login-11.hoststar.at/ben/kleinraum/wp/menuimg/style.css
.left1_sub{
padding-top:2%;
padding-bottom:2%;
width: 100%;
float: left;
background-color: #cccccc
}
.left1_sub:hover ~ .left2 {border-radius: 10px;}
.left2{
float: left;
margin-right: 20px;
margin-top: 20px;
width: 500px;
height:600px;
background-color: #ccccff
}
Just introducing myself to css3 so sorry if there are failures.
ben

Answer 1

This can be done very easily with jQuery or something similar.
If are comfortable using jQuery something like this would work.
First, create a class in CSS with a border radius:
.rounded { border-radius: 5px; /* (or whatever) */ }
Then, in <script> tags:
jQuery(document).ready(function($) {
var obj = $('.left1_sub'),
target = $('.left2');
obj.hover(
//mouse in
function(){
target.addClass('rounded');
//mouse out
},function(){
target.removeClass('rounded');
});
});
http://jsfiddle.net/wGzgB/11/