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才能实现这一目标。只有移动＆＃34; .centrermenu＆＃34; div <ul>内。但是使用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;
}

将鼠标悬停在一个列表元素上，会影响div only CSS

3 个答案: