CSS在悬停或单击图像上显示单独的文本

Question

当用户悬停或单击图像时，我尝试显示一条文本消息。这些消息将是：“好的”或“好的”每个图像的不同文本。由于某些原因，我不能让它工作，我可以让它工作，如果我悬停在普通的旧文本上，而不是在图像上。我已经拔掉头发两天了，现在真的需要帮助了。

<link rel='stylesheet' href='https://afeld.github.io/emoji-css/emoji.css'>

<style>

        @import url("https://fonts.googleapis.com/css?family=Lato:400,700");
        
        .rating-wrapper {
          max-width: 400px;
          margin: 80px auto;
          background: #fff;
          padding: 1em;
          border-radius: 3px;
          box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
        }
        .rating-wrapper .rating-label {
          text-align: center;
          font-weight: 700;
          display: block;
        }
        .rating-wrapper .ratingItemList {
          max-width: 300px;
          margin: auto;
          display: flex;
          justify-content: space-between;
          padding: 1em 0;
        }
        .rating-wrapper input.rating {
          display: none;
        }
        .rating-wrapper label.rating {
          padding: 5px 3px;
          font-size: 32px;
          opacity: 0.7;
          filter: grayscale(1);
          cursor: pointer;
        }
        .rating-wrapper label.rating:hover {
          filter: grayscale(0.84);
          transform: scale(1.1);
          transition: 100ms ease;
        }
        .rating-wrapper input.rating:checked + label.rating {
          filter: grayscale(0);
          opacity: 1;
          transform: scale(1.1);
        }
        
        .hide {
          display: none;
        }
            
        .myDIV:hover + .hide {
          display: block;
          color: red;
        }

</style>

    <form class="rating-wrapper">
      <label class="rating-label">How helpful was this?
        <div class="ratingItemList">
          
          <input class="rating rating-4" id="rating-4-2" type="radio" value="4" name="rating"/>
          <label class="rating rating-4" for="rating-4-2"><i class="em em-grinning"></i></label>
          
          <input class="rating rating-5" id="rating-5-2" type="radio" value="5" name="rating"/>
          <label class="rating rating-5" for="rating-5-2"><i class="em em-star-struck"></i></label>
        </div>
      </label>
      
      <label class="myDIV">Hover over me.</label>
      
      <div class="hide"><br>I am shown when someone hovers over the image above.</div>
        
    </form>

Answer 1

根据Selector Reference的说法，我没有看到任何只使用CSS来做这件事的方法。但它可以用纯Javascript来完成。

​

const divShow = document.querySelector('.hide');
function showUp(){
  
  divShow.style.display = "block";
  divShow.style.color = "red";
}
function hide(){
  divShow.style.display = "none";
  
}

  @import url("https://fonts.googleapis.com/css?family=Lato:400,700");
        
        .rating-wrapper {
          max-width: 400px;
          margin: 80px auto;
          background: #fff;
          padding: 1em;
          border-radius: 3px;
          box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
        }
        .rating-wrapper .rating-label {
          text-align: center;
          font-weight: 700;
          display: block;
          position: relative;
        }
        .rating-wrapper .ratingItemList {
          max-width: 300px;
          margin: auto;
          display: flex;
          justify-content: space-between;
          padding: 1em 0;
        }
        .rating-wrapper input.rating {
          display: none;
        }
        .rating-wrapper label.rating {
          padding: 5px 3px;
          font-size: 32px;
          opacity: 0.7;
          filter: grayscale(1);
          cursor: pointer;
        }
        .rating-wrapper label.rating:hover {
          filter: grayscale(0.84);
          transform: scale(1.1);
          transition: 100ms ease;
        }
        .rating-wrapper input.rating:checked + label.rating {
          filter: grayscale(0);
          opacity: 1;
          transform: scale(1.1);
        }
        
        .hide {
          display: none;
        }

<link rel='stylesheet' href='https://afeld.github.io/emoji-css/emoji.css'>
<form class="rating-wrapper">
      <label class="rating-label">How helpful was this?
        <div class="ratingItemList">
          
          <input class="rating rating-4" id="rating-4-2" type="radio" value="4" name="rating"/>
          
          <label onmouseover="showUp()" onmouseleave="hide()"  class="rating rating-4" for="rating-4-2"><i class="em em-grinning"></i>
            
          </label>
         
          
          <input class="rating rating-5" id="rating-5-2" type="radio" value="5" name="rating"/>
          <label onmouseover="showUp()" onmouseleave="hide()" class="rating rating-5" for="rating-5-2"><i class="em em-star-struck"></i></labe>
          
        </div>
      </label>
      
      <label onmouseover="showUp()" onmouseleave="hide()" class="myDIV">Hello world</label>
      <div class="hide"><br>I am shown when someone hovers over the image above.</div>
      
        
    </form>

​