修复了引导折叠中的尴尬过渡,并删除了 .well 中访问过的链接样式

Fix awkward transition in bootstrap collapse and remove visited link styling in .well

本文关键字:删除 well 样式 链接 访问 折叠      更新时间:2023-09-26

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;
}