Javascript 根据其他类css样式操纵类的css样式_Javascript_Jquery_Html_Css

Javascript 根据其他类css样式操纵类的css样式

javascript jquery html css

Javascript 根据其他类css样式操纵类的css样式,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在混合应用程序上使用Framework7插件的导航抽屉。可以使用按钮以及左/右滑动/滑动来打开/关闭抽屉现在，当导航抽屉打开时，类添加了另一个类，它是活动的类。所以当打开时：关闭时：嗨，是的，这是可能的。使用HTML和Javascript本身。您还可以使用jquerydom操作来实现这一点。让我知道你想知道哪一个很抱歉延迟了，下面是仅在悬停事件中将css类添加到div的示例代码。我只使用html和css完成了这项工作。（无DOM操作） a、 ex1:hover{color:red

我正在混合应用程序上使用Framework7插件的导航抽屉。可以使用按钮以及左/右滑动/滑动来打开/关闭抽屉

现在，当导航抽屉打开时，类

添加了另一个类，它是

活动的

类。所以当打开时：

关闭时：


嗨，是的，这是可能的。使用HTML和Javascript本身。您还可以使用jquerydom操作来实现这一点。让我知道你想知道哪一个
很抱歉延迟了，下面是仅在悬停事件中将css类添加到div的示例代码。我只使用html和css完成了这项工作。（无DOM操作）

a、 ex1:hover{color:red；}
a、 ex2:hover，a.ex2:active{font size:150%；}
a、 ex3:悬停，a.ex3:活动{背景：红色；}
a、 ex4:hover，a.ex4:active{font-family:monospace；}
a、 ex5:visted，a.ex5:link{text-decoration:none；}
a、 ex5:悬停，a.ex5:活动{文本装饰：下划线；}
.打开关闭{显示：无；}
a、 ex6:hover.open-close{display:block；}













注意-请记住根据您的HTML结构使用适当的CSS选择器
希望这有帮助。如果你有任何问题，请告诉我。很乐意帮忙
我已经修改了你的HTML一点
CSS将是
我希望这有帮助
任何，但我更喜欢哪个更好。非常接近我所需要的，但在我的情况下，我需要在
上获取事件，当它添加一个类活动时，它还应该添加一个样式到当按钮单击和抽屉滑动时，类面板可以添加活动类。我想在framework7插件中查找函数，但很难找到。@c.k。您好，是的，这是可能的，但我希望看到您的html结构，以便我可以向您展示适当的css选择器。如果你不介意的话。
<!doctype html>
<html>
    <head>
        <style>
            a.ex1:hover{color: red;}
            a.ex2:hover, a.ex2:active {font-size: 150%;}
            a.ex3:hover, a.ex3:active {background: red;}
            a.ex4:hover, a.ex4:active {font-family: monospace;}
            a.ex5:visited, a.ex5:link {text-decoration: none;}
            a.ex5:hover, a.ex5:active {text-decoration: underline;}
            .open-close{ display: none;}
            a.ex6:hover .open-close{display: block;}  
        </style>
    </head>
    <body>
            <p>
                <a class = "ex1" href="#"> This link changes color </a>
            </p>
            <p>
                <a class = "ex2" href="#"> This link changes font-size </a>
            </p>
            <p>
                <a class = "ex3" href="#"> This link changes background-color </a>
            </p>
            <p>
                <a class = "ex4" href="#"> This link changes font-family </a>
            </p>
            <p>
                <a class = "ex5" href="#"> This link changes text-decoration </a>
            </p>
            <p>
                <a class = "ex6" href="#"> 
                    <div>This link displays another div by detecting change in class</div> 
                    <div class="open-close">
                        Here you can add your content to hide/show/modify elements based on the classes
                    </div>
                </a>
            </p>
    </body>
</html>

<div class="panel-overlay"></div>
            <div class="panel panel-left panel-reveal">Just to see if his appears in green on fire of a single common event</div>  <!---it adds "active class" e.g. <div class="panel panel-left panel-reveal active"> -->
            <div class="views"> Just to see if this appears in red on fire of a single common event<!--this should toggle change background, i mean add background color when  class panel has active class then remove the bgcolor when active class remove (vise versa) -->
                <div class="view view-main" data-page="home">
                  <div class="pages">
                     <div data-page="home" class="page navbar-fixed">
                        <div class="navbar">
                           <div class="navbar-inner">
                              <div class="left">
                                 <button onclick="myFunction()" type="button" class="open-panel fa fa-bars button-nav"> I am button 1</button>
                              </div>
                              <div class="center" style="left: -6.5px;"></div>
                              <div class="right">
                                 <button type="button" id="refresh" class="button-nav"> <i class="el el-refresh"></i> I am button 2</button>
                              </div>
                           </div>
                        </div>
                        <div class="page-content">
                           <div class="content-block"> content here... </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div> 

function myFunction(){
            $(".panel-reveal").addClass("active");
            if($(".panel-reveal").hasClass("active")) {
                $(".views").addClass("change")
            }
        }

.active{
               background-color: green !important;
            }
            .change{
                background-color: red !important;
            }