根据其他类的css样式来操作一个类的css风格

Manipulate css style of a class depending on other class css style

本文关键字：css 风格 一个 其他 样式 操作      更新时间：2023-09-26

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

现在，当导航抽屉打开时，类<div class="panel panel-left panel-reveal">添加了另一个类，即active类。所以打开时：<div class="panel panel-left panel-reveal active ">关闭时：<div class="panel panel-left panel-reveal>

基于该事件，是否可以将样式添加到其他类？示例是此类：<div class="views">到<div class="views" style="opacity: 0.5">

要完成的任务：当抽屉打开时，类view将添加样式，当抽屉关闭时删除view类样式。

有可能赶上那个事件并完成我想做的事情吗？

很抱歉延迟了，下面是在悬停事件中将css类添加到div的示例代码。我只使用了html和css。（无DOM操作）。

<!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>

注意-只需记住根据HTML结构使用适当的CSS选择器。

希望这能有所帮助。如果你有任何问题，请告诉我。很乐意帮忙。

嗨，是的，有可能。使用HTML和Javascript本身。您也可以使用JQUERY DOM操作来实现这一点。让我知道你想知道哪一个。

我修改了你的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>

只要添加这个JavaScript函数，你就可以开始了。

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

CSS将是

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

我希望这能有所帮助。

相关文章：