將鼠標懸停在一個列表元素上，影響div Only CSS

Question

好的，所以我有一個元素列表，將鼠標懸停在其中一個元素上之后，我希望“文本框div”的內容相應地更改。 我一遍又一遍地看網上，結果都無濟於事

  <div class="parent">
    <div class="tohover" id="m1"><a href=#>Home</a></div>
    <div class="tohover" id="m2"><a href=#>Mail</a></div>
    <div class="tohover" id="m3"><a href=#>Sports</a></div>
    <div class="tohover" id="m4"><a href=#>Movies</a></div>
    <div class="centermenu">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel molestie nulla, eu tincidunt purus. Phasellus eget ligula orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque mollis varius ex et</p>
    </div></div>

而css部分將類似於：

.centermenu {
  background-color: #F9F9F9;
  position: relative;
  float: left;
  width: 1000px;
  margin-top: 70px;
  margin-left: 40px;
  border: 1px solid #606060;
  height: auto;
  color: black;
  word-wrap: break-word; 
}

p {
  padding: 5px;
  text-indent: 10px;
}

.tohover > a {
  color: black;
}

#m1:hover ~ .centermenu {
  background-color: red;
}

但這是行不通的。 它什么也沒做。 有什么想法嗎？ 這可以處理圖像，但是現在不行了。

我正在考慮使用:: before :: after，但是它們不替換文本...我想要

Answer 1

這個解決方案怎么樣。 您最好的選擇是jQuery / javascript。
https://jsfiddle.net/vp02x56o/7/

HTML

<div class="parent">
    <div class="tohover" id="m1"><a href=#>Home</a></div>
    <div class="tohover" id="m2"><a href=#>Mail</a></div>
    <div class="tohover" id="m3"><a href=#>Sports</a></div>
    <div class="tohover" id="m4"><a href=#>Movies</a></div>
    <div class="centermenu" id="c1">
        <p>1111111111</p>
    </div>
    <div class="centermenu" id="c2">
        <p>222222222222222</p>
    </div>
    <div class="centermenu" id="c3">
        <p>3333333333</p>
    </div>
    <div class="centermenu" id="c4">
        <p>4444444444444444</p>
    </div>
</div>  

CSS：

    .centermenu {
      display:none;
      background-color: #F9F9F9;
      position: relative;
      float: left;
      width: 1000px;
      margin-top: 70px;
      margin-left: 40px;
      border: 1px solid #606060;
      height: auto;
      color: black;
      word-wrap: break-word; 
    }

    p {
      padding: 5px;
      text-indent: 10px;
    }

    .tohover > a {
      color: black;
    }

    #c1.centermenu {
      display: block;
    }


    #m1:hover ~ #c1 {
      display: block;
    }


    #m2:hover ~ #c2 {
      display: block;
    }
    #m2:hover ~ #c1 {
      display: none;
    }


    #m3:hover ~ #c3 {
      display: block;
    }
    #m3:hover ~ #c1 {
      display: none;
    }


    #m4:hover ~ #c4 {
      display: block;
    }
    #m4:hover ~ #c1 {
      display: none;
    }

Answer 2

只有使用CSS才能達到目標。 僅在<ul>移動“ .centrermenu” div時。 但是例如使用javascript或Jquery確實很容易

Answer 3

如前所述，jQuery是您最好的選擇，但是您可以執行類似的操作，盡管我不建議這樣做，

https://jsfiddle.net/eor0gmsg/

.centermenu {
  background-color: #F9F9F9;
  position: relative;
  float: left;
  width: 1000px;
  margin-top: 70px;
  margin-left: 40px;
  border: 1px solid #606060;
  height: auto;
  color: black;
  word-wrap: break-word; 
}

p {
  padding: 5px;
  text-indent: 10px;
}

.tohover > a {
  color: black;
}

#m1:hover ~ .centermenu:before  {
  background-color: red;
   content: "Lorem ipsum";

}

#m1:hover ~ .centermenu{
  color:white;
}