Question

我有一个由多个链接组成的菜单，每个链接后跟一个描述性段落。只要突出显示正确的链接，我就需要段落改变颜色，反之亦然。

基本上，我正在寻找一种方法来执行：悬停，它将改变与自身不同的链接（理想情况下仅使用CSS，我希望避免使用JS或jQuery - 如果这是事实上可能。）

以下是一个例子：

＆＃13;

<a class="title" href="page1.html">Page 1</a>
<hr/>
<a class="description" href="page1.html">Description of Page 1</a>
<br><br>
<a class="title" href="page2.html">Page 2</a>
<hr/>
<a class="description" href="page2.html">Description of Page 2</a>
<br><br>
<a class="title" href="page3.html">Page 3</a>
<hr/>
<a class="description" href="page3.html">Description of Page 3</a>

＆＃13;

谢谢你们！

Answer 1

如果将元素包装在一个父元素（div，p等）下，则可以使用纯CSS执行此操作

请记住更改锚样式，以便您可以更改颜色。 a{color:inherit}

.colorChanger {
  color:green;
}
.colorChanger:hover {
  color:blue;
}
a{
  color:inherit;
}

<div class = 'colorChanger'>
  <a class="title" href="page3.html">Page 1</a>
  <hr/>
  <a class="description" href="page3.html">Description of Page 1</a>
</div>
<br><br>
<div class = 'colorChanger'>
  <a class="title" href="page3.html">Page 2</a>
  <hr/>
  <a class="description" href="page3.html">Description of Page 2</a>
</div>
<br><br>
<div class = 'colorChanger'>
  <a class="title" href="page3.html">Page 3</a>
  <hr/>
  <a class="description" href="page3.html">Description of Page 3</a>
</div>

Answer 2

.title:hover + .description{
   <yourstyle>
}

但仅当您删除<hr/>时，因为它仅适用于

之后的兄弟姐妹

使用Javscript / JQuery会更容易，并且不会要求您更改标记以适应仅CSS解决方案

Answer 3

你可以这样做......你只需要添加一个类来识别页面！

a.page_1:hover ~ a.description.page_1{
  color:green;
}

<a class="title page_1" href="page1.html">Page 1</a>
<hr/>
<a class="description page_1" href="page1.html">Description of Page 1</a>
<br><br>
<a class="title" href="page2.html">Page 2</a>
<hr/>
<a class="description" href="page2.html">Description of Page 2</a>
<br><br>
<a class="title" href="page3.html">Page 3</a>
<hr/>
<a class="description" href="page3.html">Description of Page 3</a>

Answer 4

请尝试以下操作： Demo

where: { geo: { near: here, maxDistance: distance, unit: 'meters' }}

CSS：

<div class="title active"><a href="page1.html">Page 1</a>

    <hr/>
    <p class="description">Description of Page 1</p>
</div>
<br>
<br>
<div class="title"><a href="page2.html">Page 2</a>

    <hr/>
    <p class="description">Description of Page 2</p>
</div>
<div class="title">
    <br>
    <br>
<a href="page3.html">Page 3</a>

    <hr/>
    <p class="description">Description of Page 3</p>
</div>

Answer 5

此css规则应该完成工作

.title:hover + .description {
    color: #ff0000;
}

鼠标悬停时更改不同的链接颜色

5 个答案: