修复了引导折叠中的尴尬过渡,并删除了 .well 中访问过的链接样式
Fix awkward transition in bootstrap collapse and remove visited link styling in .well
div class="well"在完全打开后看起来是正确的,但是当它滚动打开时,它有某种动画,仍然有边框和不同颜色的背景。我不知道如何改变这一点。谁能帮忙?
此外,div class="well" 内部的链接,在被访问后,默认情况下它们会变成带有下划线的蓝色。如何在此处删除下划线和访问的颜色?
提前感谢您的帮助!
http://codepen.io/aahmed2/pen/ZOqZgg?editors=0100
上面是我的Codepen的链接,因此您可以确切地看到正在发生的事情。尝试单击牛部分下的"Cooperia",您将看到奇怪的过渡。如果您选择"关于"然后返回我的 Codepen,您将看到我无法弄清楚如何删除的默认引导样式。
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>
如果你想覆盖动画行为,你应该去:
.collapsing{
-webkit-transition: none;
transition: none;
}
请记住,此动画包括 3 种状态
.collapse -> .collapseping -> .collapse in
http://getbootstrap.com/javascript/#collapse
因此,如果您想更改默认的引导程序动画,您应该在那里做一些工作。
关于访问链接后的文本样式,即在
a:visited {
color: "your-default-color";
text-decoration: none;
}
相关文章:
- 使用php或javascript从facebook相册URL中删除多余的部分
- RegEx删除空属性?例如,如果(class=“”||class=“”)移除;否则就下课
- 如何删除多行HTML排列中的空白
- 如何从rails中的代码中删除新行( )
- 删除对HTML元素的拖动
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 按顺序添加和删除类
- iframe正在添加标签,需要删除它们
- 如何在HTML输入字段中添加不可删除的后缀
- addData()从最新图表中删除.js 2.1.3-怎么了
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- 删除CKEditor工具栏按钮,但不删除功能
- 当浏览器上的后退按钮到达主页时,我需要删除Class
- 正在删除node.js中已验证的网站
- 正在从页面中删除iframe
- 如何从 HTML 查询中删除项目
- 如何在iOS应用程序中从Firebase中删除超过6小时的数据
- 未捕获的类型错误:无法读取属性'删除'的未定义
- 在不知道深度或父属性的情况下从对象中删除属性
- 解析JSON并从中删除对象会出错