Question

我用歌词制作了这个标志，当用户将鼠标悬停在它上面时，它会变得更大，但它不起作用，我尝试了.html:hover > .text，.all:hover >.text：

.html:hover > .text { color: red; font-size: 30px; }

任何帮助都是有意义的。

.all {
  transition: 2s ease-out;
}
html:hover .all {
  background-image: #FF0000;
  transition: 1s ease-in;
  opacity: 0.1;
}
.text {
  font-size: 100%;
}
.text {
  font-size: 12px;
}
.html:hover > .text {
  color: red;
  font-size: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <title>musica.html</title>
</head>

<body>

  <img class="all" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Confederate_Rebel_Flag.svg/2000px-Confederate_Rebel_Flag.svg.png" style="position:fixed; width:100%;height:100% " />
  <center>
    <pre>
        <h1>Dixieland</h1>
      <div class="text">Oh, I wish I was in the land of cotton,
Old times there are not forgotten, (Alt Original: Cinnamon seed and sandy bottom,)
Look away, look away, look away Dixie Land.

In Dixie Land, where I was born in,
early on one frosty mornin', 
Look away, look away, look away Dixie Land. 

I wish I was in Dixie, Hooray! Hooray! 
In Dixie Land I'll take my stand
to live and die in Dixie. 
Away, away, away down south in Dixie. 
Away, away, away down south in Dixie 

Optional Verses

Ole Missus marry "Will the weaver"
Willum was a gay deceiver
Look away! Look away! Look away!
Dixie Land

But when he put his arm around 'er,
He smiled fierce as a forty pounder,
Look away! Look away! Look away!
Dixie Land

His face was sharp as a butcher's cleaver
But that did not seem to grieve 'er
Look away! Look away! Look away!
Dixie Land

Ole Missus acted the foolish part
And died for a man that broke her heart
Look away! Look away! Look away!
Dixie Land

Now here's a health to the next ole Missus
An' all the gals that want to kiss us;
Look away! Look away! Look away!
Dixie Land

But if you want to drive 'way sorrow
Come and hear this song tomorrow
Look away! Look away! Look away!
Dixie Land

There's buckwheat cakes and Injun batter,
Makes you fat or a little fatter
Look away! Look away! Look away!
Dixie Land


Then hoe it down and scratch your gravel,
To Dixie's Land I'm bound to travel,
Look away! Look away! Look away!
Dixie Land
        </div>
      </pre>
  </center>
</body>

</html>

Answer 1

您可以通过更新以下风格来实现这一目标

这

.html:hover > .text {
      color: red;
      font-size: 30px;
    }

到

html:hover  .text {
      color: red;
      font-size: 30px;
    }

供参考 - http://plnkr.co/edit/MZ4OneSGtJiGdBTeXTXh?p=preview

Answer 2

CSS选择器中的>意味着.text元素应该是HTML的直接上升。此外，html上没有hover个事件。

因此，您最好将:hover指令直接添加到.text：

.text:hover {
  color: red;
  font-size: 30px;
}

当我将鼠标悬停在歌词上时，如何让歌词变得更大？

2 个答案: