div class =" well"在它完全打开后看起来是正确的,但它有一些动画,因为它滚动打开,仍然有一个边框和不同的彩色背景。我无法弄清楚如何改变它。有人可以帮忙吗?
此外,div类中的链接=" well",在访问它们之后,默认情况下它们会变为蓝色并带有下划线。如何删除下划线和访问过的颜色?
提前感谢您的帮助!
http://codepen.io/aahmed2/pen/ZOqZgg?editors=0100
上面是我的Codepen的链接,因此您可以准确地看到发生了什么。尝试点击" Cooperia"在牛区,你会看到奇怪的过渡。如果您选择"关于"然后返回我的Codepen,你会看到默认的bootstrap样式,我无法弄清楚如何删除。
a {
color: #000;
}
a:hover {
color: #d00000;
text-decoration: none;
}
.animal-disease-main h3 {
color: #fff;
background: #c1c0be;
padding: 10px;
}
.animal-disease-main a {
padding-left: 20px;
}
.animal-disease-main .collapse .well {
background: rgba(0, 0, 0, 0.02);
border: none;
border-radius: 0;
padding: 10px 29px;
}
.collapse .well a {
padding: 0;
}
.collapse .well a:visted {
color: #000;
text-decoration: none !important;
}
a[role="button"]:focus,
a[role="button"]:active {
color: #d00000;
}
a[role="button"]:visted {
color: #000000;
}

<div class="animal-disease-main">
<div class="container">
<div class="col-sm-4">
<h3>Cattle</h3>
<a href="/health-resources/anthrax.html">Anthrax</a>
<br>
<a href="/health-resources/bovine-tuberculosis.html">Bovine Tuberculosis</a>
<br>
<a href="/health-resources/brucellosis.html">Brucellosis</a>
<br>
<a class="animal-health-toggle" role="button" data-toggle="collapse" href="#calf-scours" aria-expanded="false" aria-controls="calf-scours">
Calf Scours
</a>
<div class="collapse" id="calf-scours">
<div class="well">
<a href="http://www.dpi.nsw.gov.au/__data/assets/pdf_file/0015/50208/treating_calf_scours_-_primefact_135-final.pdf" target="_blank">Fact Sheet</a>
<br>
<a href="https://www.ag.ndsu.edu/pubs/ansci/beef/as776.pdf" target="_blank">Fact Sheet 2</a>
<br>
<a href="http://www.cattlenetwork.com/cattle-resources/baby-calf-health/Calf-Scours-Causes-prevention-and-treatment-121277154.html" target="_blank">Causes, Prevention, Treatment</a>
<br>
<a href="http://www.extension.umn.edu/agriculture/dairy/calves-and-heifers/ten-strategies-to-battle-calf-scours/" target="_blank">Strategies for Calf Scours</a>
<br>
<a href="http://msue.anr.msu.edu/news/calf_scours_signs_treatment_and_prevention_part_2" target="_blank">Symptoms, Treatment, Prevention</a>
<br>
<a href="http://www1.agric.gov.ab.ca/$department/deptdocs.nsf/all/faq8072" target="_blank">FAQ</a>
</div>
</div>
<br>
<a role="button" data-toggle="collapse" href="#cooperia" aria-expanded="false" aria-controls="cooperia">
Cooperia
</a>
<div class="collapse" id="cooperia">
<div class="well">
<a href="http://cal.vet.upenn.edu/projects/merialsp/Trichosp/trich_8.htm" target="_blank">About</a>
<br>
<a href="http://www.dpi.nsw.gov.au/__data/assets/pdf_file/0015/50208/treating_calf_scours_-_primefact_135-final.pdf" target="_blank">Fact Sheet</a>
<br>
<a href="http://parasitipedia.net/index.php?option=com_content&view=article&id=2632&Itemid=2910" target="_blank">Biology, Prevention, and Control</a>
<br>
<a href="http://www.progressivecattle.com/topics/herd-health/4676-cooperia-study-shows-ineffective-dewormers-costly-effects" target="_blank">Inneffective Wormers' Cost Effects</a>
</div>
</div>
<br>
<a href="/health-resources/cryptosporidium.html">Cryptosporidium</a>
<br>
<a href="/health-resources/fmd.html">Foot and Mouth Disease</a>
<br>
<a href="/health-resources/leptospirosis.html">Leptospirosis</a>
<br>
<a role="button" data-toggle="collapse" href="#neosporosis" aria-expanded="false" aria-controls="neosporosis">
Neosporosis
</a>
<div class="collapse" id="neosporosis">
<div class="well">
<a href="http://www.ars.usda.gov/News/docs.htm?docid=11007" target="_blank">Animal Overview</a>
<br>
<a href="http://www.merckvetmanual.com/mvm/generalized_conditions/neosporosis/overview_of_neosporosis.html" target="_blank">Disease Facts</a>
<br>
<a href="http://www.thecattlesite.com/diseaseinfo/222/neosporosis/" target="_blank">Cattle</a>
<br>
</div>
</div>
<br>
<a role="button" data-toggle="collapse" href="#pink-eye" aria-expanded="false" aria-controls="pink-eye">
Pink Eye
</a>
<div class="collapse" id="pink-eye">
<div class="well">
<a href="http://www.dpi.nsw.gov.au/__data/assets/pdf_file/0017/103904/pinkeye-in-cattle.pdf" target="_blank">Fact Sheet</a>
<br>
<a href="http://beef.unl.edu/pinkeye-in-cattle" target="_blank">Overview</a>
<br>
<a href="http://beef.unl.edu/cattleproduction/controllingflies" target="_blank">Fly Control</a>
<br>
</div>
</div>
<br>
<a href="/health-resources/vesicular-stomatitis.html">Vesicular Stomatitis</a>
</div>
<div class="col-sm-4">
<h3>Goats and Sheep</h3>
<a href="/health-resources/anthrax.html">Anthrax</a>
<br>
<a href="/health-resources/brucellosis.html">Brucellosis</a>
<br>
<a role="button" data-toggle="collapse" href="#cooperia2" aria-expanded="false" aria-controls="cooperia2">
Cooperia
</a>
<div class="collapse" id="cooperia2">
<div class="well">
<a href="http://cal.vet.upenn.edu/projects/merialsp/Trichosp/trich_8.htm" target="_blank">About</a>
<br>
<a href="http://www.dpi.nsw.gov.au/__data/assets/pdf_file/0015/50208/treating_calf_scours_-_primefact_135-final.pdf" target="_blank">Fact Sheet</a>
<br>
<a href="http://parasitipedia.net/index.php?option=com_content&view=article&id=2632&Itemid=2910" target="_blank">Biology, Prevention, and Control</a>
<br>
<a href="http://www.progressivecattle.com/topics/herd-health/4676-cooperia-study-shows-ineffective-dewormers-costly-effects" target="_blank">Inneffective Wormers' Cost Effects</a>
</div>
</div>
<br>
<a href="/health-resources/cryptosporidium.html">Cryptosporidium</a>
<br>
<a href="/health-resources/fmd.html">Foot and Mouth Disease</a>
<br>
<a href="/health-resources/leptospirosis.html">Leptospirosis</a>
<br>
<a role="button" data-toggle="collapse" href="#neosporosis2" aria-expanded="false" aria-controls="neosporosis2">
Neosporosis
</a>
<div class="collapse" id="neosporosis2">
<div class="well">
<a href="http://www.ars.usda.gov/News/docs.htm?docid=11007" target="_blank">Animal Overview</a>
<br>
<a href="http://www.merckvetmanual.com/mvm/generalized_conditions/neosporosis/overview_of_neosporosis.html" target="_blank">Disease Facts</a>
<br>
</div>
</div>
<br>
<a href="/health-resources/vesicular-stomatitis.html">Vesicular Stomatitis</a>
</div>
<div class="col-sm-4">
<h3>Horses</h3>
<a href="/health-resources/anthrax.html">Anthrax</a>
<br>
<a href="/health-resources/leptospirosis.html">Leptospirosis</a>
<br>
<a href="/health-resources/vesicular-stomatitis.html">Vesicular Stomatitis</a>
<h3>Pigs</h3>
<a href="/health-resources/anthrax.html">Anthrax</a>
<br>
<a href="/health-resources/brucellosis.html">Brucellosis</a>
<br>
<a href="/health-resources/fmd.html">Foot and Mouth Disease</a>
<br>
<a href="/health-resources/leptospirosis.html">Leptospirosis</a>
<br>
<a href="/health-resources/swine-flu.html">Swine Flu</a>
<h3>Poultry</h3>
<a href="/health-resources/anthrax.html">Anthrax</a>
<br>
<a href="/health-resources/avian-influenza.html">Avian Influenza</a>
<br>
</div>
</div>
</div>
&#13;
答案 0 :(得分:0)
如果你想覆盖动画行为,你应该去:
.collapsing{
-webkit-transition: none;
transition: none;
}
请记住,此动画包含3个状态
.collapse - &gt; .collapsing - &gt; .collapse in
http://getbootstrap.com/javascript/#collapse
因此,如果您想更改默认的Bootstrap动画,那就是您应该做的工作。
关于访问链接后的文本样式,即
a:visited {
color: "your-default-color";
text-decoration: none;
}