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

Question

我需要分配 div 以使用 jQuery 设置它们的样式，因为这是我的分配任务。它显示得很好，但未通过验证。

错误是在此上下文中元素 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;
}

有没有其他方法可以在 jQuery 中使用悬停功能而不会出现此 HTML 错误？

奖励问题:
有没有一种简单的方法可以在 jQuery 中将这种尖锐的粉红色更改为粉红色的文本阴影？ (我用 CSS 来做，但也许有一个简单的方法)

Answer 1

不要在h# 标签中使用div。您可以改用 span。您可以使用 display: inline-block;/display: block;

使 span 像 div >

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

奖励答案:

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color=#ff1d8e)";/*IE 8*/
text-shadow: 3px 3px 3px #ff1d8e;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color=#ff1d8e); /*IE 5.5-7*/

通过 jQuery 或 css 添加它(css 更好)。