Jquer好友DIV改变颜色

Posted 2020-07-28 屈震

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquer好友DIV改变颜色相关的知识，希望对你有一定的参考价值。

下面这组代码是点击DIV后div颜色改变或者鼠标放上颜色改变的Jquer语句。

<style type="text/css">
制作DIV样式
.a1 {
    position: absolute;
    width: 141px;
    height: 240px;
    z-index: 1;
    left: 6px;
    top: 33px;
    border:1px solid #0FF;
}
.a2 {
    position: absolute;
    width: 141px;
    height: 60px;
    z-index: 1;
    left: 0px;
    top: 0px;
    background-color:#F0F;
    border:1px solid #0FF;
}
.a3 {
    position: absolute;
    width: 141px;
    height: 60px;
    z-index: 1;
    left: 0px;
    top: 60px;
    background-color:#F0F;
    border:1px solid #0FF;
}
.a4 {
    position: absolute;
    width: 141px;
    height: 60px;
    z-index: 1;
    left: 0px;
    top: 120px;
    background-color:#F0F;
    border:1px solid #0FF;
}
.a5 {
    position: absolute;
    width: 141px;
    height: 60px;
    z-index: 1;
    left: 0px;
    top: 180px;
    background-color:#F0F;
    border:1px solid #0FF;
}
</style>
</head>

<body>
链接数据库
<?php
$db = new mysqli("localhost","root","123","student");

$sql = "select * from firend";

$result = $db->query($sql);

$attr = $result->fetch_row();


        echo "<select name=‘name‘ id=‘id‘>
                    <option>$attr[1]</option>
                    
                </select>";

?>
放入5个DIV
<div class="a1">
<div class="a2" align="center">张三</div>
<div class="a3" align="center">李四</div>
<div class="a4" align="center">王五</div>
<div class="a5" align="center">赵六</div>
</div>
</body>

JS代码：
<script type="text/javascript">
$(document).ready(function(e) {
    $(".a2").mouseover(function(){
        
    $(this).css("background-color","red")   写入的是鼠标放上后颜色变成红色
    
    })
        $(".a3").mouseover(function(){
        
    $(this).css("background-color","red")
    
    })
        $(".a4").mouseover(function(){
        
    $(this).css("background-color","red")
    
    })
        $(".a5").mouseover(function(){
        
    $(this).css("background-color","red")
    
    })
        $(".a2").mouseout(function(){
        

    if($(this).attr("xz")!=1)
    {
        $(this).css("background-color","#F0F")    写入的是一个效果 如果xz为1的话，变成F0F颜色
    }
    
    })
        $(".a3").mouseout(function(){
        
    
    if($(this).attr("xz")!=1)
    {
        $(this).css("background-color","#F0F")    
    }
    
    })
        $(".a4").mouseout(function(){
        
    
    if($(this).attr("xz")!=1)
    {
        $(this).css("background-color","#F0F")    
    }
    
    })
        $(".a5").mouseout(function(){
        
    
    if($(this).attr("xz")!=1)
    {
        $(this).css("background-color","#F0F")    
    }
    
    $(".a2").click(function(){
    
    $(".a2").css("background-color","#F0F");  写入的是鼠标点击之后，加了一个属性为xz， 鼠标点击xz为1，鼠标不点击xz为0 . 点击鼠标后颜色变成红色
    
    $(".a2").attr("xz",0);
    
        $(this).css("background-color","red");
        
        $(this).attr("xz",1)
        
    })
        $(".a3").click(function(){
    
    $(".a3").css("background-color","#F0F");
    
    $(".a3").attr("xz",0);
    
        $(this).css("background-color","red");
        
        $(this).attr("xz",1)
        
    })
        $(".a4").click(function(){
    
    $(".a4").css("background-color","#F0F");
    
    $(".a4").attr("xz",0);
    
        $(this).css("background-color","red");
        
        $(this).attr("xz",1)
        
    })
        $(".a5").click(function(){
    
    $(".a5").css("background-color","#F0F");
    
    $(".a5").attr("xz",0);
    
        $(this).css("background-color","red");
        
        $(this).attr("xz",1)
        
    })
    
    })
});
</script>

以上是关于Jquer好友DIV改变颜色的主要内容，如果未能解决你的问题，请参考以下文章

根据数字大小改变颜色js

离子div边界颜色变化离子android由代码

如何克隆隐藏输入的值并附加到另一个 div？

悬停改变颜色

jquery 的animate()方法可以改变背景颜色么？

C语言改变字体颜色的代码