只有我的一些风格的div正在采取这种风格？

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我从你的CSS中找到了这种风格.map-list li:nth-child(even) { background: none; }。删除它将保持指定的背景颜色。

笔：http://codepen.io/anon/pen/ZBRZBM?editors=1100

Answer 2

这是一个固定版本，背景和其他工作 - 你有一个非常凌乱的CSS，我清理了一下（你不应该有完全相同的选择器的多个条目，除非它在@ media-rules中覆盖以前的条目）。此外，<center>标记已弃用了十年，无论如何都不能成为<ul>的直接后代 - <ul>唯一允许的直接后代是{{1} }}

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

<li>

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