Question

我正在尝试制作一种文本左右对齐的框，当我将鼠标悬停在一条线上时，我希望它成为另一种颜色。

我的问题是：我如何用CSS做到这一点，甚至可以实现？我的编码技能很低，我无法弄清楚。所以我让文本正确对齐，但这就是我被困住的地方。

HTML

<div class="border">
<h3 class="text">I want these lines to separately<span>become red when hovering.</span></h3>
<p class="text">Not all<span>of them at the same time.</span></p>
<p class="text">Can you <span>please help?</span></p>
<p class="text">That would be much appreciated, <span>thank you!</span></p></div>

CSS：

.border {
  border-style: dotted;
  border-width: thin;
  padding-top: 2px;
  padding-bottom: 6px;
  margin:10px;
}

.text {
  display: block;
  text-align: center;
}

:hover .text {
  color: red;
  transition: all 5s ease;
}

.text span {
  display: block;
  float: right;
  width: 50%;
}

这是我到目前为止所得到的。如你所见，所有的线都变成红色......

非常感谢任何帮助！ http://jsfiddle.net/4m4bcvm9/

Answer 1

更改此

:hover .text {
    color: red;
    transition: all 5s ease;
}

到

.text:hover {
    color: red;
    transition: all 5s ease;
}

我还建议你将5s更改为更短的时间，因为如果将鼠标快速移动到文本上，很难看到它

Answer 2

您的css文件存在问题。正确的是：

.border {
  border-style: dotted;
  border-width: thin;
  padding-top: 2px;
  padding-bottom: 6px;
  margin:10px;
}

.text {
display: block;
  text-align: center;
    transition: all 1s ease;
}

.text:hover {
color: red;

}

.text span {
  display: block;
  float: right;
  width: 50%;
}

另一件事是，将transition放在没有伪类的部分（我的意思是:hover）是一个更好的方法，据我所知和这是你在我的回答中看到的地方。

Answer 3

此修复程序适用于我，更改：

:hover .text {
    color: red;
    transition: all 5s ease;
}

到

.border .text:hover {
    color: red;
    transition: all 5s ease;
}

Answer 4

我不确定这是否相关，但我尝试使用Brackets在.css和.html文件中离线执行此操作。我尝试上传样式表。我用这个：

    <!doctype html>
    <body>
     <head>
    <link rel="stylesheet" type="text/css" href="behandlingstyle.css">
    </head>
    <div class="border">
   <h3 class="text">I want these lines to separately<span>become red when hovering.</span></h3>
   <p class="text">Not all<span>of them at the same time.</span></p>
   <p class="text">Can you <span>please help?</span></p>
   <p class="text">That would be much appreciated, <span>thank you!</span></p>
    </div>
    </body>
    </html>

CSS没有加载，如何修复？
css样式也没有加载编辑wordpress主题style.css文件，只是为了澄清！

再一次，任何帮助都非常感谢！谢谢！

修改：

由于我残酷的编码技巧，我最终得到了它... 我创建了一个新的css文件并添加了href链接，瞧！它奏效了，我无法告诉你我对此感到惊讶这就解决了我的问题：

<link rel="stylesheet" type="text/css" href="/wordpress/wp-content/themes/ultra/newstyle.css">

.css正确加载。

谢谢大家的回复：）

将鼠标悬停在一行TEXT（不是LINK）上

4 个答案: