悬停在列表元素上时更改div中的文本

时间：2016-08-03 08:19:29

标签： html css hover division auto-update

所以我设置了一个列表，这样当我将鼠标悬停在不同的元素上时，它会将图片更改为元素的右侧。我希望文字与图片一起使用，所以我希望在下面的div中。有没有办法用css来实现这一点当我将鼠标悬停在列表中的某个元素上时，它会改变div中的文本？通常我会尝试自己解决这些问题，但我一直在寻找一段时间，似乎无法找到解决方案。

HTML：

<div class="relative">
<ul>
    <li>
        <a href="#">Arms</a>
        <img src="img/arms.jpg" alt="">

          <div class="absolute">TEXT TEST 1</div>

    </li>
    <li>
        <a href="#">Back</a>
        <img src="img/back.jpg" alt="">
        <div class="absolute">TEXT TEST 2</div>
    </li>
    <li>
        <a href="#">Head</a>
        <img src="img/head.jpg" alt="">
    </li>
    <li>
        <a href="#">Feet</a>
        <img src="img/feet.jpg" alt="">
    </li>
    <li>
        <a href="#">Legs</a>
        <img src="img/legs.jpg" alt="">
    </li>
    <li>
        <a href="#">Chair</a>
        <img src="img/chair.jpg" alt="">
    </li>
    <li>
        <a href="#">Desk</a>
        <img src="img/desk.jpg" alt="">
    </li>
</ul>
</div>

这是相对的css：

ul {
    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position:right top;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    border-right: 1px solid #444;
    display: inline-block;
    height: 700px;
    position: relative;
    width: 800px;
    list-style:none;
    padding-left:0;
}
li {
    font: bold 16px/100px sans-serif;
    height: 100px;
}
a {
    border-right: 1px solid #444;
    border-top: 1px solid #444;
    border-left: 1px solid #444;
    color: black;
    display: block;
    text-align: center;
    text-decoration: none;
    width: 99px;    
}
a:hover {
    background: gray;
    color: #fff;
}
div.relative {
    position: relative;
    width: 700;
    height: 900;
}

div.absolute {
    position: absolute;
    top: 700px;
    width: 800px;
    height: 100px;
    border: 1px solid #444;
}
h3{
    margin-left:200px;
    margin-top:500px;
}
img {
    display: none;
    height: 700;
    position: absolute;
    right: 0;
    top: 0;
    width: 600px;
    background-color:red;
}
a:hover + img,
img:hover {
    display: block;
}

4 个答案:

答案 0 :(得分：1)

你可以添加一个样式来显示和隐藏文本div，就像你已经为img做的那样：

a + img + div
{
  display: none;
}
a:hover + img + div
{
  display: block;
}

答案 1 :(得分：0)

这是一个解决方案。使用li:hover事件隐藏并显示相应的div。

ul {
  background-image: url('../img/bg.jpg');
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: right top;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
  display: inline-block;
  height: 700px;
  position: relative;
  width: 800px;
  list-style: none;
  padding-left: 0;
}
li {
  font: bold 16px/100px sans-serif;
  height: 100px;
}
a {
  border-right: 1px solid #444;
  border-top: 1px solid #444;
  border-left: 1px solid #444;
  color: black;
  display: block;
  text-align: center;
  text-decoration: none;
  width: 99px;
}
a:hover {
  background: gray;
  color: #fff;
}
div.relative {
  position: relative;
  width: 700;
  height: 900;
}
div.absolute {
  position: absolute;
  top: 700px;
  width: 800px;
  height: 100px;
  border: 1px solid #444;
}
h3 {
  margin-left: 200px;
  margin-top: 500px;
}
img {
  display: none;
  height: 700;
  position: absolute;
  right: 0;
  top: 0;
  width: 600px;
  background-color: red;
}
a:hover + img,
img:hover {
  display: block;
}
.absolute {
  display: none;
}
.relative li:hover div.absolute {
  display: initial;
}
<div class="relative">
  <ul>
    <li>
      <a href="#">Arms</a>
      <img src="img/arms.jpg" alt="">

      <div class="absolute">TEXT TEST 1</div>

    </li>
    <li>
      <a href="#">Back</a>
      <img src="img/back.jpg" alt="">
      <div class="absolute">TEXT TEST 2</div>
    </li>
    <li>
      <a href="#">Head</a>
      <img src="img/head.jpg" alt="">
    </li>
    <li>
      <a href="#">Feet</a>
      <img src="img/feet.jpg" alt="">
    </li>
    <li>
      <a href="#">Legs</a>
      <img src="img/legs.jpg" alt="">
    </li>
    <li>
      <a href="#">Chair</a>
      <img src="img/chair.jpg" alt="">
    </li>
    <li>
      <a href="#">Desk</a>
      <img src="img/desk.jpg" alt="">
    </li>
  </ul>
</div>

答案 2 :(得分：0)

我使用了.wrapper div，但是当你使用javascript时，你有更多的可能性。

ul {
  background-image: url('../img/bg.jpg');
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position:right top;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
  display: inline-block;
  height: 700px;
  position: relative;
  width: 800px;
  list-style:none;
  padding-left:0;
}
li {
  font: bold 16px/100px sans-serif;
  height: 100px;
}
a {
  border-right: 1px solid #444;
  border-top: 1px solid #444;
  border-left: 1px solid #444;
  color: black;
  display: block;
  text-align: center;
  text-decoration: none;
  width: 99px;    
}
a:hover {
  background: gray;
  color: #fff;
}
div.relative {
  position: relative;
  width: 700;
  height: 900;
}

div.absolute {
  position: absolute;
  top: 700px;
  width: 800px;
  height: 100px;
  border: 1px solid #444;
}
h3{
  margin-left:200px;
  margin-top:500px;
}
img {
  height: 700;
  position: absolute;
  right: 0;
  top: 0;
  left: 101px;
  background-color:red;
  width: 600px;
}
.wrapper {
  display: none;
}
a:hover + .wrapper {
  display: block;
}
<div class="relative">
  <ul>
    <li>
      <a href="#">Arms</a>
      <div class="wrapper">
        <img src="https://unsplash.it/1200/309/?random" alt="">
        <div class="absolute">TEXT TEST 1</div>
      </div>
    </li>
    <li>
      <a href="#">Back</a>
      <div class="wrapper">
        <img src="https://unsplash.it/1200/308/?random" alt="">
        <div class="absolute">TEXT TEST 2</div>
      </div>
    </li>
    <li>
      <a href="#">Head</a>
      <div class="wrapper">
        <img src="https://unsplash.it/1200/306/?random" alt="">

      </div></li>
    <li>
      <a href="#">Feet</a>
      <div class="wrapper">
        <img src="https://unsplash.it/1200/305/?random" alt="">

      </div></li>
    <li>
      <a href="#">Legs</a>
      <div class="wrapper">
        <img src="https://unsplash.it/1200/304/?random" alt="">

      </div></li>
    <li>
      <a href="#">Chair</a>
      <div class="wrapper">
        <img src="https://unsplash.it/1200/301/?random" alt="">
        </div>
        </li>
    <li>
      <a href="#">Desk</a>
      <div class="wrapper">
        <img src="https://unsplash.it/1200/302/?random" alt="">

      </div></li>
  </ul>
</div>

答案 3 :(得分：0)

我用javascript和jQuery解决了它。但我不确定它是否能解决你的问题。

只需向所有li添加一个eventlistener即可更改相应div的文本。 

    $("li").mouseover(function(){
        $("#TEXT1").text($(this).children("a").text());
    })

如果您有一些不希望以这种方式行事，可以为所有li添加标签。

相关问题
最新问题