Question

我需要使用jQuery为div设置div，因为这是我的任务的任务。它显示得很好，但没有通过验证。

在此上下文中，错误是元素div不允许作为元素h1的子元素。（抑制此子树中的更多错误。）

 <div class="col-md-8 col-md-offset-2">
                <div id="slogan">
                <h1 class="brand-heading">Love Life Strong <div id="decorate">Powerful</div> Give</h1>
            </div>



$(document).ready(function(){
$("#slogan").hover(function(){
  $("#slogan").css({
    backgroundColor: '#ff1d8e'
    });//end css
  $("#decorate").css("text-decoration","underline");
  },function(){
  $("#slogan").css({
    backgroundColor: 'transparent'
    });//end css
  $("#decorate").css("text-decoration","none");
});//end slogan decoration

CSS：

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Arial,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.heading .heading-body .brand-heading {
    font-size: 40px;
}

在没有此HTML错误的情况下，是否有另一种方法可以在jQuery中使用悬停功能？

奖金问题：
是否有一种简单的方法可以将这种粉红色的粉红色改变为jQuery中的粉红色文本阴影？（我可以用CSS做，但也许有一种简单的方法）

Answer 1

你有没有考虑过这个？

<h1 class="brand-heading">Love Life Strong <span id="decorate">Powerful</span> Give</h1>

对于悬停，您只需添加一条css规则：

#slogan:hover {
    background-color: #ff1d8e;
}

Answer 2

请勿在{{1}}标记中使用div。您可以改用h#。您可以使用span / span

使div像display: inline-block;一样行事

display: block;

奖金回答：

<h1 class="brand-heading">
    Love Life Strong <span id="decorate">Powerful</span> Give
</h1>

通过jQuery或css添加它（css更好）。

Answer 3

您可以使用span标签来设置嵌套在h1标头内的元素的样式。

像这样：<h1 class="brand-heading">Love Life Strong <span id="decorate">Powerful</span> Give</h1>

您可以设置css text-shadow属性，就像在代码示例中使用jquery设置其他样式一样。它有一个颜色选项。

HTML 5-如何解决验证错误？ - 在此上下文中，元素div不允许作为元素h1的子元素

3 个答案: