Question

我正在使用以下代码。当我在悬停时刷新页面时，手风琴的标题变为蓝色。我想刷新页面时保持白色。请帮我解决它的问题。我使用了jquery，CSS。由于jquery或CSS，我无法理解它。

   <style>
body{

    background-color: #00666a !important;
}
.left{
    width: 416px;
    background: #fff;
    padding: 3.5px;
    border: 4px solid #eee;
    box-shadow: 1px 1px 4px #ccc;
    margin-left: 25px;

}

.title-font:hover{
    color: #ffffff !important;
    text-decoration: none !important;
}


.title-font{
    color: #ffffff;
    text-decoration: none;
}

.gly-font:focus{
  color:#ffffff;
  text-decoration: none;
}

.gly-font{
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 14px;
    margin-right: 5px;

}





</style>

<html>

<head>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>
<div class="container">
<div class="custom-row">  <!-- make it 100% -->



<div class="col-md-6 left-outer"><!--make it 50% -->
<!-- accordian  -->

<div class="accordion-group" id="accordion">
<div class="accordion-panel" >
        <div class="heading glyphicon-custom">
            <h4 class="title">
                <a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus gly-font  "></i><span class="title-panel">Antipasti</span></a>
            </h4>
        </div>


<div id="panel1" class="panel-collapse collapse">
<div class="contain-body">    
hello
        </div>
    </div>
</div>




</div>





</div> <!-- custom-row ends here-->


</div>



<script type="text/javascript">
var selectIds =$('#panel1, #panel2');
$(function ($) {


    selectIds.on('hidden.bs.collapse show.bs.collapse', function () {
      $(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
});
</script>




</body>
</html>

Answer 1

蓝色来自<a>的默认值，更多来自w3schools。

a:link,
a:visited,
a:active,
a:focus {
  color: white;
}

在刷新标题颜色后悬停得到改变

1 个答案: