图像淡出并仅在HTML CSS中链接文本淡入淡出

Question

尝试使图标渐变为.5不透明度，并使链接文本同时淡入1.0不透明度。我只能上班。尝试解决这个问题，如果可能的话，不要完全修改css和html。

我正在尝试为本网站的商店在线商店图标执行此操作： http://mbc.milkstreetmarketing.com/

.shoprow {
  margin-bottom: 10px;
  height: 100%;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding-top: 2%;
  padding-bottom: 4%;
}
.icons {
  display: inline-block;
  width: 11%;
  padding: 0 10%;
  position: relative;
}
.comingsoon {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  font-size: 2vw;
  color: #8ddc2b !important;
  font-weight: bold !important;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}
.comingsoon:hover {
  opacity: 1;
}
.shopnow {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  font-size: 2vw;
  color: red !important;
  font-weight: bold !important;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}
.shopnow:hover {
  opacity: 1;
}
.shoptitlesactive {
  left: 0;
  right: 0;
  position: absolute;
  color: #8ddc2b !important;
  font-weight: bold;
}
.shoptitlesinactive {
  left: 0;
  right: 0;
  position: absolute;
  color: #bcbdc0 !important;
  font-weight: bold;
}

<div id="shopwrapper">
<div id="shopoverlay">
    <div id="shopstore">Shop Online Store</div>
    <div class="shoprow">
        <div class="icons">
            <img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-2.png" class="imgicon"></img>
            <p class="comingsoon">Coming Soon!</p>
            <p class="shoptitlesinactive">ABRASIVES</p>
        </div>
    </div>
    <div class="icons">
        <img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-6.png">
            <p class="shopnow">Shop Now!</p>
            <p class="shoptitlesactive">DRILLING</p>
        </div>
        <div class="icons">
            <img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-1.png">
                <p class="comingsoon">Coming Soon!</p>
                <p class="shoptitlesinactive">ELECTRICAL</p>
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

你尝试过这样的事吗？

.icons:hover .shopnow, .icons:hover .comingsoon{
    opacity: 1;
}
.icons:hover img{
    opacity: .5;
}

然后你可以删除这些：

.shopnow:hover {
  opacity: 1;
}
.comingsoon:hover {
  opacity: 1;
}

Answer 2

我认为您正在寻找the + selector：

.imgicon:hover + .comingsoon, .comingsoon:hover {
  opacity: 1;
}
.imgicon {
  transition: opacity .5s ease-in-out;
}
.imgicon:hover {
  opacity: 0.5;
}

当您将鼠标悬停在.imgicon或.comingsoon时，opacity: 1会应用于.commingsoon。当您将鼠标悬停在.imgicon时，opacity: 0.5会应用于此。

.shoprow {
  margin-bottom: 10px;
  height: 100%;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding-top: 2%;
  padding-bottom: 4%;
}
.icons {
  display: inline-block;
  width: 11%;
  padding: 0 10%;
  position: relative;
}
.comingsoon {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  font-size: 2vw;
  color: #8ddc2b !important;
  font-weight: bold !important;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}
.imgicon:hover + .comingsoon, .comingsoon:hover {
  opacity: 1;
}
.imgicon {
  transition: opacity .5s ease-in-out;
}
.imgicon:hover {
  opacity: 0.5;
}
.shopnow {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  font-size: 2vw;
  color: red !important;
  font-weight: bold !important;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}
.shopnow:hover {
  opacity: 1;
}
.shoptitlesactive {
  left: 0;
  right: 0;
  position: absolute;
  color: #8ddc2b !important;
  font-weight: bold;
}
.shoptitlesinactive {
  left: 0;
  right: 0;
  position: absolute;
  color: #bcbdc0 !important;
  font-weight: bold;
}

<div id="shopwrapper">

  <div id="shopoverlay">
    <div id="shopstore">
      Shop Online Store
    </div>

    <div class="shoprow">

      <div class="icons">
        <img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-2.png" class="imgicon"></img>
        <p class="comingsoon">Coming Soon!</p>
        <p class="shoptitlesinactive">ABRASIVES</p>
      </div>
    </div>
    <div class="icons">
      <img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-6.png">
      <p class="shopnow">Shop Now!</p>
      <p class="shoptitlesactive">DRILLING</p>
    </div>

    <div class="icons">
      <img src="http://mbc.milkstreetmarketing.com/wp-content/uploads/2015/06/Icon-1.png">
      <p class="comingsoon">Coming Soon!</p>
      <p class="shoptitlesinactive">ELECTRICAL</p>
    </div>

  </div>