change class attributes when hovering over other css 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

• David Thomas: Post your HTML here, in the question. Please don't expect people to go to your site and then view source in order to help you. Make it easy for us to help you. Also, a JS Fiddle, or similar, live (SSCCE) demo (where we can see the code, and, importantly, edit it without having to download and create our own demos goes a long way to getting our help. Seriously. please: help us to help you.

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/

• Shauna: A note regarding why JavaScript was offered as a solution: CSS doesn't allow for the type of selecting the OP is asking for. CSS only traverses down the DOM (IE - siblings and children), not up it (IE - you can't select a parent element from a child). Since the OP's HTML would require going up out of the element that contains "left1_sub" to get to "left2", either JavaScript or an HTML restructure is necessary to achieve the OP's goal.
• mordondro: hey! thx, for the answer, will try for this special case. but still i am searching for a way to do it in pure css, since i want to use this method also on more complex stuff.
• Calvin: As @Shauna has said, this won't be possible with pure CSS without an HTML restructure
• mordondro: hey! just saw that there are other answers down here, sry, new to stack :) thx a lot, will try restructure.