class - 将鼠标悬停在其他 CSS 类上时更改类属性

Question

当“left1_sub”类悬停时，我试图为“left2”类的 div 提供边框半径。

我已经搜索了很多解决方案，但似乎没有什么对我有用。

它的 html：http ://web318.login-11.hoststar.at/ben/kleinraum/wp/menuimg/index.html 和完整的 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
}

只是向 css3 介绍自己，如果有失败，请见谅。

本

Answer 1

这可以很容易地用 jQuery 或类似的东西来完成。

如果对使用 jQuery 感到舒服，这样的东西会起作用。

首先，在 CSS 中创建一个具有边框半径的类：

.rounded { border-radius: 5px; /* (or whatever) */ }

然后，在<script>标签中：

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/