html - 只有我的一些样式化的 div 正在采用这种样式？

标签 html css

我正在尝试制作一个带有弹出点的世界地图，直到最后它一直都很好，我尝试设置航路点的样式，但我无法弄清楚如何防止弹出点旋转，而且只有一些航路点保持指定的背景颜色，其他的是透明的，我根本不知道为什么。

http://codepen.io/juryk/pen/vydNJy 

html {
  box-sizing: border-box;
  height: 100%;
  font-size: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100%;
  padding: 2rem;
  font: 100%/1.375em 'Roboto', sans-serif;
  background: #fcfcfc;
}

h1 {
  color: #013567;
  font-weight: bold;
  font-size: 10px;
  line-height: .5em;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  padding-top: 10px;
}

h2 {
  color: #013567;
  font-weight: bold;
  font-size: 9px;
  letter-spacing: 1px;
  padding-top: 3px;
  line-height: 1em;
}

h1,
h2,
p {
  margin-bottom: 1em;
  font-size: 10px;
}

.button {
  display: inline-block;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #013567;
}

.button:hover {
  background: #013567;
}

.map-list {
  position: relative;
  margin: 1.375em;
  background: #fff;
}

.map-list li {
  position: relative;
  padding: 1.375em;
}

.map-list li:nth-child(even) {
  background: #eee;
}

.map-list h2,
.map-list p {
  margin-bottom: 0;
  line-height: 1.5em;
}

.map-list .button {
  position: absolute;
  top: 50%;
  right: 1.375em;
  transform: translateY(-50%);
}

@media (min-width:600px) {
  .map-list {
    height: 0;
    padding-top: 60%;
    background-image: url(http://www.heyer-associates.com/wp-content/uploads/2016/11/worldmap2.jpg);
    background-repeat: no-repeat;
    background-size: 105%;
    background-position: 0% 84%;
    border: none;
  }
  .map-list li {
    position: absolute;
    padding: 0;
    transform: translateZ(0);
    list-style-type: none;
  }
}

.map-list li:nth-child(even) {
  background: none;
}

.map-list li {
  position: absolute;
  bottom: 0;
  left: -1.5em;
  content: '';
  display: block;
  width: .8em;
  height: .8em;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
  background: #fff;
  border: .3em solid #013567;
  border-radius: 55%;
  border-bottom-right-radius: 0;
  cursor: pointer;
  z-index: 0;
}

.map-list li .details {
  position: absolute;
}

.map-list li:hover .details {
  z-index: 1;
}

.map-list li.sf {
  bottom: 62%;
  left: 72.2%;
  z-index: 6;
}

.map-list li.bh {
  bottom: 59%;
  left: 73.2%;
  z-index: 1;
}

.map-list li.bl {
  bottom: 64%;
  left: 72.3%;
  z-index: 7;
}

.map-list li.ny {
  bottom: 62%;
  left: 86%;
  z-index: 1;
}

.map-list li.ut {
  bottom: 62.5%;
  left: 73.4%;
  z-index: 5;
}

.map-list li.jp {
  bottom: 59%;
  left: 44.0%;
  z-index: 1;
}

.map-list li.co {
  bottom: 61.6%;
  left: 75.2%;
  z-index: 3;
}

.map-list li.vc {
  bottom: 68.6%;
  left: 71.5%;
  z-index: 8;
}

.map-list li.az {
  bottom: 60.5%;
  left: 74.3%;
  z-index: 2;
}

.map-list li.mc {
  bottom: 60.7%;
  left: 72.8%;
  z-index: 2;
}

.map-list li.aus {
  bottom: 16.7%;
  left: 45.5%;
  z-index: 2;
}

.map-list li.ws {
  bottom: 69.6%;
  left: 72.3%;
  z-index: 8;
}

.map-list .details {
  padding: 1rem;
  width: 185px;
  margin-bottom: 10px;
  transform: scale(0);
  transform-origin: 0 100%;
  font-size: 75%;
  background: #eee;
  border-radius: 0.5em;
  opacity: 0;
  transition: opacity 500ms, transform 400ms cubic-bezier(0.6, -0.3, 0.3, 1.3);
}

.map-list li:hover .details {
  transform: scale(1);
  opacity: 1;
}

.map-list li.central .details,
.map-list li.east .details {
  position: absolute;
  bottom: 0;
  right: 100%;
  transform-origin: 100% 100%;
  white-space: nowrap;
}

.map-list p {
  margin-bottom: 0.25rem;
}

.map-list .button {
  position: static;
  transform: none;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
}

@media (max-width:480px) {
  body {
    padding: 2rem 1rem;
  }
  .map-list {
    margin: 1.375em 0;
  }
  .map-list p {
    margin-bottom: 0.5rem;
  }
  .map-list .button {
    position: static;
    transform: none;
    width: 100%;
  }
}
<ul class="map-list">
  <center>
    <li class="bl">
      <div class="details">
        <h2>BELLEVUE, WASHINGTON</h2> Sotheby's International Realty
        <a class="button" href="http://www.brazensothebysrealty.com/eng">www.brazensothebysrealty.com</a>
      </div>
    </li>
    <li class="ut">
      <div class="details">
        <h2>PARK CITY, UTAH</h2> List Sotheby's International Realty
        <a class="button" href="http://www.listsothebysrealty.com/eng">www.listsothebysrealty.com</a>
      </div>
    </li>
    <li class="bh">
      <div class="details">
        <h2>BEVERLY HILLS, CALIFORNIA</h2> Hilton & Hyland
        <a class="button" href="https://www.hiltonhyland.com/">www.hiltonhyland.com</a> &nbsp; <br> Douglas Elliman
        <a class="button" href="https://www.elliman.com/">www.elliman.com</a>
      </div>
    </li>
    <li class="ny">
      <div class="details">
        <h2>NEW YORK CITY, NEW YORK</h2> List Sotheby's International Realty
        <a class="button" href="http://www.listsothebysrealty.com/eng">www.listsothebysrealty.com</a>
      </div>
    </li>
    <li class="jp">
      <div class="details">
        <h2>TOKYO, JAPAN</h2> Tokyu Resort Corporation
        <a class="button" href="http://www.tokyu-resort.co.jp/en/">www.tokyu-resort.co.jp</a>
      </div>
    </li>
    <li class="sf">
      <div class="details">
        <h2>SAN FRANCISCO, CALIFORNIA</h2> Pacific Union - Christie's International Real Estate
        <a class="button" href="http://www.pacificunion.com">www.pacificunion.com</a>
        <h2>MENLO PARK, CALIFORNIA</h2> Pacific Union
        <a class="button" href="http://www.pacificunion.com">www.pacificunion.com</a>
      </div>
    </li>
    <li class="co">
      <div class="details">
        <h2>ASPEN, COLORADO</h2> Coldwell Banker Previews International
        <a class="button" href="http://www.coldwellbankerpreviews.com/">www.coldwellbankerpreviews.com</a>
        <h2>VAIL, COLORADO</h2> Sotheby's International Realty
        <a class="button" href="http://www.sothebysrealty.com/eng">www.sothebysrealty.com</a>
      </div>
    </li>
    <li class="vc">
      <div class="details">
        <h2>VANCOUVER, BRITISH COLUMBIA</h2> Royal LePage Sussex
        <a class="button" href="http://www.royallepage.ca">www.royallepage.ca</a>
      </div>
    </li>
    <li class="az">
      <div class="details">
        <h2>SCOTTSDALE, ARIZONA</h2> Arizona Best
        <a class="button" href="http://www.arizonabest.com/">www.arizonabest.com</a>
      </div>
    </li>
    <li class="mc">
      <div class="details">
        <h2>MONTECITO, CALIFORNIA</h2> Coldwell Banker Preview
        <a class="button" href="http://www.coldwellbankerpreviews.com/">www.coldwellbankerpreviews.com</a>
      </div>
    </li>
    <li class="aus">
      <div class="details">
        <h2>MELBOUNRE, AUSTRALIA</h2> Dingle Partners
        <a class="button" href="http://dinglepartners.com.au/">www.dinglepartners.com.au</a>
      </div>
    </li>
    <li class="ws">
      <div class="details">
        <h2>WHISTLER, BRITISH COLUMBIA</h2> RE/MAX Sea to Sky Real Estate
        <a class="button" href="http://www.remax-whistler.com/">www.remax-whistler.com</a>
      </div>
    </li>
  </center>
</ul>

最佳答案

这是一个固定版本，背景和其余部分都可以使用 - 你有一个非常困惑的 CSS，我稍微清理了一下(你不应该为完全相同的选择器设置多个条目，除非它在 ​​@media-rules 中覆盖以前的条目)。此外，<center>标签已被弃用十年，并且无论如何都不能成为 <ul> 的直接后代- 唯一允许的直系后代 <ul>是<li> .

http://codepen.io/anon/pen/RoJOgR 

html {
  box-sizing: border-box;
  height: 100%;
  font-size: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100%;
  padding: 2rem;
  font: 100%/1.375em 'Roboto', sans-serif;
  background: #fcfcfc;
}

h1 {
  color: #013567;
  font-weight: bold;
  font-size: 10px;
  line-height: .5em;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  padding-top: 10px;
}

h2 {
  color: #013567;
  font-weight: bold;
  font-size: 9px;
  letter-spacing: 1px;
  padding-top: 3px;
  line-height: 1em;
}

h1,
h2,
p {
  margin-bottom: 1em;
  font-size: 10px;
}

.button {
  display: inline-block;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #013567;
}

.button:hover {
  background: #013567;
}

.map-list {
  position: relative;
  margin: 1.375em;
  background: #fff;
}

.map-list li:nth-child(even) {
  background: #eee;
}

.map-list h2,
.map-list p {
  margin-bottom: 0;
  line-height: 1.5em;
}

.map-list .button {
  position: absolute;
  top: 50%;
  right: 1.375em;
  transform: translateY(-50%);
}

.map-list li {
    padding: 1.375em;
  position: absolute;
  bottom: 0;
  left: -1.5em;
  content: '';
  display: block;
  width: .8em;
  height: .8em;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
  background: #fff;
  border: .3em solid #013567;
  border-radius: 55%;
  border-bottom-right-radius: 0;
  cursor: pointer;
  z-index: 0;
}

.map-list .details {
   position: absolute;
  padding: 1rem;
  width: 185px;
  margin-bottom: 10px;
  font-size: 75%;
  background: #eee;
    transform: scale(1);
  transform: rotate(-45deg);
  border-radius: 0.5em;
  opacity: 0;
  transition: opacity 500ms, transform 400ms cubic-bezier(0.6, -0.3, 0.3, 1.3);
}

.map-list li:hover .details {
  transform: scale(1);
  transform: rotate(-45deg);
  opacity: 1;
    z-index: 1;
}

.map-list li.central .details,
.map-list li.east .details {
  position: absolute;
  bottom: 0;
  right: 100%;
  transform-origin: 100% 100%;
  white-space: nowrap;
}

.map-list p {
  margin-bottom: 0.25rem;
}

.map-list .button {
  position: static;
  transform: none;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
}

.map-list li.sf {
  bottom: 62%;
  left: 72.2%;
  z-index: 6;
}

.map-list li.bh {
  bottom: 59%;
  left: 73.2%;
  z-index: 1;
}

.map-list li.bl {
  bottom: 64%;
  left: 72.3%;
  z-index: 7;
}

.map-list li.ny {
  bottom: 62%;
  left: 86%;
  z-index: 1;
}

.map-list li.ut {
  bottom: 62.5%;
  left: 73.4%;
  z-index: 5;
}

.map-list li.jp {
  bottom: 59%;
  left: 44.0%;
  z-index: 1;
}

.map-list li.co {
  bottom: 61.6%;
  left: 75.2%;
  z-index: 3;
}

.map-list li.vc {
  bottom: 68.6%;
  left: 71.5%;
  z-index: 8;
}

.map-list li.az {
  bottom: 60.5%;
  left: 74.3%;
  z-index: 2;
}

.map-list li.mc {
  bottom: 60.7%;
  left: 72.8%;
  z-index: 2;
}

.map-list li.aus {
  bottom: 16.7%;
  left: 45.5%;
  z-index: 2;
}

.map-list li.ws {
  bottom: 69.6%;
  left: 72.3%;
  z-index: 8;
}

@media (max-width:480px) {
  body {
    padding: 2rem 1rem;
  }
  .map-list {
    margin: 1.375em 0;
  }
  .map-list p {
    margin-bottom: 0.5rem;
  }
  .map-list .button {
    position: static;
    transform: none;
    width: 100%;
  }
}

@media (min-width:600px) {
  .map-list {
    height: 0;
    padding-top: 60%;
    background-image: url(http://www.heyer-associates.com/wp-content/uploads/2016/11/worldmap2.jpg);
    background-repeat: no-repeat;
    background-size: 105%;
    background-position: 0% 84%;
    border: none;
  }
  .map-list li {
    position: absolute;
    padding: 0;
    list-style-type: none;
  }
}
<ul class="map-list">
    <li class="bl">
      <div class="details">
        <h2>BELLEVUE, WASHINGTON</h2> Sotheby's International Realty
        <a class="button" href="http://www.brazensothebysrealty.com/eng">www.brazensothebysrealty.com</a>
      </div>
    </li>
    <li class="ut">
      <div class="details">
        <h2>PARK CITY, UTAH</h2> List Sotheby's International Realty
        <a class="button" href="http://www.listsothebysrealty.com/eng">www.listsothebysrealty.com</a>
      </div>
    </li>
    <li class="bh">
      <div class="details">
        <h2>BEVERLY HILLS, CALIFORNIA</h2> Hilton & Hyland
        <a class="button" href="https://www.hiltonhyland.com/">www.hiltonhyland.com</a> &nbsp; <br> Douglas Elliman
        <a class="button" href="https://www.elliman.com/">www.elliman.com</a>
      </div>
    </li>
    <li class="ny">
      <div class="details">
        <h2>NEW YORK CITY, NEW YORK</h2> List Sotheby's International Realty
        <a class="button" href="http://www.listsothebysrealty.com/eng">www.listsothebysrealty.com</a>
      </div>
    </li>
    <li class="jp">
      <div class="details">
        <h2>TOKYO, JAPAN</h2> Tokyu Resort Corporation
        <a class="button" href="http://www.tokyu-resort.co.jp/en/">www.tokyu-resort.co.jp</a>
      </div>
    </li>
    <li class="sf">
      <div class="details">
        <h2>SAN FRANCISCO, CALIFORNIA</h2> Pacific Union - Christie's International Real Estate
        <a class="button" href="http://www.pacificunion.com">www.pacificunion.com</a>
        <h2>MENLO PARK, CALIFORNIA</h2> Pacific Union
        <a class="button" href="http://www.pacificunion.com">www.pacificunion.com</a>
      </div>
    </li>
    <li class="co">
      <div class="details">
        <h2>ASPEN, COLORADO</h2> Coldwell Banker Previews International
        <a class="button" href="http://www.coldwellbankerpreviews.com/">www.coldwellbankerpreviews.com</a>
        <h2>VAIL, COLORADO</h2> Sotheby's International Realty
        <a class="button" href="http://www.sothebysrealty.com/eng">www.sothebysrealty.com</a>
      </div>
    </li>
    <li class="vc">
      <div class="details">
        <h2>VANCOUVER, BRITISH COLUMBIA</h2> Royal LePage Sussex
        <a class="button" href="http://www.royallepage.ca">www.royallepage.ca</a>
      </div>
    </li>
    <li class="az">
      <div class="details">
        <h2>SCOTTSDALE, ARIZONA</h2> Arizona Best
        <a class="button" href="http://www.arizonabest.com/">www.arizonabest.com</a>
      </div>
    </li>
    <li class="mc">
      <div class="details">
        <h2>MONTECITO, CALIFORNIA</h2> Coldwell Banker Preview
        <a class="button" href="http://www.coldwellbankerpreviews.com/">www.coldwellbankerpreviews.com</a>
      </div>
    </li>
    <li class="aus">
      <div class="details">
        <h2>MELBOUNRE, AUSTRALIA</h2> Dingle Partners
        <a class="button" href="http://dinglepartners.com.au/">www.dinglepartners.com.au</a>
      </div>
    </li>
    <li class="ws">
      <div class="details">
        <h2>WHISTLER, BRITISH COLUMBIA</h2> RE/MAX Sea to Sky Real Estate
        <a class="button" href="http://www.remax-whistler.com/">www.remax-whistler.com</a>
      </div>
    </li>
</ul>

关于html - 只有我的一些样式化的 div 正在采用这种样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41052872/

上一篇：css - 如果 div 内容是图像，固定标题不起作用

下一篇：javascript - 在滚动功能上，它使用 $(window) 而不是 $(document)，为什么？

相关文章：

javascript - Angular 函数结果未显示在 DOM 中

html - ie7中嵌套元素继承父Div的边距

html - pushState:状态对象到底是做什么用的？

JQuery 自动完成突出显示

html - ASP.NET Gridview 固定 header 可滚动不起作用

html - 修复了在 div 上的滚动

html - 在 bootstrap css 中垂直对齐缩略图？

javascript - .click 函数不适用于使用 .fadeIn 加载到 div 中的内容

javascript - 如何使出现在点击上的文本对 SEO 可见？

html - 我如何使用 1 个 <span> 标记来加粗多个单词？例如在下面的文字中

©2024 IT工具网  联系我们