Question

我的网页是www.bodrum_dev.info（从两个单词中删除下划线字符）。

我正在尝试验证我的页面，但有特色的新闻部分（当鼠标移到标题时，左侧更改文章标题和图像）会产生30个错误。

我知道原因。因为我在标签内部有h1 h2和div标签。所以基本上删除父标签并在h1 h2和div中放置标签可能会解决问题。但是，我的模板使用jquery来告诉鼠标悬停时要做什么，因此编辑我的模板会破坏我的页面。它只是表现不正常。如何在不破坏鼠标悬停效果的情况下验证我的页面？相关文件如下：

以下是我的模板：

<div class="newsWrap"><ul><li>
  <a href="[ARTICLELINK]">
    <h1 style="height: 90px;">
      <img border="0" src="/DesktopModules/DnnForge%20-%20NewsArticles/Headline.ashx?c=[CUSTOM:MANSET]&amp;fc=[CUSTOM:COLOR]" alt="[TITLE]" />
    </h1>
<h2 style="margin-top: 28px;margin-left: 5px;">
      [HASSUMMARY][SUMMARY][/HASSUMMARY][HASNOSUMMARY][DETAILS:150][/HASNOSUMMARY]
    </h2>
<div class="laImage">[IMAGETHUMB:200:265]</div>
<span>[TITLE]</span>
  </a>
</li></ul></div>

以下是我的jquery条目：

<script type="text/javascript">
jQuery().ready(function() {
jQuery(".newsWrap a:first").addClass('selected');
jQuery(".newsWrap a").mouseover(function(){
    jQuery('.newsWrap a.selected').removeClass('selected');
    jQuery(this).addClass('selected');
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function() {
        $('.koseContent p').each(function(){
            $(this).css('marginTop',(52-$(this).height())/2);
        }).show();
    });
    </script>
<script type="text/javascript" src="/js/jquery.cycle.lite.1.0.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
// 
jQuery(document).ready(function(){
jQuery('table.RandomView').wrap("<div id='imageSwapper'></div>");
jQuery('table.RandomView').attr({align: "left"});
jQuery('table.RandomView').cycle({
    timeout:4000,
    speed:  1000,
    slideExpr: 'td div.sgWrap'
});
jQuery('table.RandomView tr').show();
});/* ]]> */
</script>

以下是我的css：

div.newsWrap {
    width:493px;
    height:410px;
    margin:0 10px;
    position:relative;


overflow:hidden;
    background-color:#fff;
}
div.newsWrap li{
    height:16px;
    margin-bottom:12px;
    background:

url(images/mandalina.gif) bottom left no-repeat scroll;
}
/* Element position */
div.newsWrap div.laImage {
    display:none;


position:absolute;
    top:130px;
    left:0;
    width:250px;      /* This and the overflow will crop the image */


overflow:hidden;
}
div.newsWrap h1 {
    display:none;
    position:absolute;
    top:0;
    left:0;
    height:40px;


overflow:hidden;
    padding:5px 0 0;
    white-space:nowrap;
}
div.newsWrap h2 {
    display:none;
    position:absolute;


top:60px;
    width:493px;  /* Required for IE6 */
    left:0;
    height:50px;
    overflow:hidden;
    padding:0;
}
div.newsWrap ul{

padding-left:5px;
padding-right:5px;
margin-left:205px;
    margin-top:130px;
width:500px;
}


/* Font styling */
div.newsWrap li,div.newsWrap h2{
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:normal;
    line-height:13px;
    color:#000;
}
div.newsWrap h2{
    font-weight:bold;
    text-transform:uppercase;
}
div.newsWrap h1 {
    font-family:impact,Arial,sans-serif;
    font-size:30px;
    letter-spacing:-1px;
    line-height:40px;
    margin:0 auto;
    text-transform:uppercase;
    white-space:nowrap;
}
div.newsWrap li a{
    color:#000;
    padding-left:21px;
    font-weight:bold;


text-decoration:none;
    text-transform:uppercase;
}
div.newsWrap li a:link,div.newsWrap li a:visited {
    text-decoration:none;


color:#000;
}
/*
* This section reveals the strapline, summary and image for the hovered title
* The hover acts as a fallback, the real hover class is set by the selected class
*/
div.newsWrap li a:hover div,div.newsWrap li a.selected

div,div.newsWrap li a:hover h1,div.newsWrap li a.selected h1,div.newsWrap li a:hover   h2,div.newsWrap li a.selected h2 {


display:block;
}
div.newsWrap li a:hover span {
    text-decoration:underline;
}

Answer 1

你真的应该修复页面，然后修复jQuery代码。我将<a>标记放在标题标记内，缩略图图像周围，以及<span>（或其他;它取决于您想要点击的内容）。然后更改jQuery代码，使其将“selected”样式作为一个整体应用于“newsWrap”div，并将CSS更改为您想要的样式。

如果您尝试使用错误的HTML，您会发现浏览器会做一些奇怪的事情。

Answer 2

您可以将鼠标悬停效果应用于您喜欢的任何内容，而不是像这样声明效果：

jQuery(".newsWrap a").mouseover(function()

将鼠标悬停应用于其他元素，例如：

jQuery(".newsWrap h1").mouseover(function()

或者如果您愿意：

jQuery(".newsWrap h1 a").mouseover(function()

请记住检查这些函数中的所有引用是否有意义（或应用于正确的元素）。

修改后的代码：

按要求影响H1和H2。

<强>原始

jQuery(".newsWrap a").mouseover(function(){
    jQuery('.newsWrap a.selected').removeClass('selected');
    jQuery(this).addClass('selected');
});

<强>修改：

$(".newsWrap h1").mouseover(function() {
    $(".newsWrap h1.selected").removeClass("selected");
    $(this).addClass("selected");
});
$(".newsWrap h2").mouseover(function() {
    $(".newsWrap h2.selected").removeClass("selected");
    $(this).addClass("selected");
});

第一个鼠标悬停功能影响div类.newsWrap中的所有H1元素，第二个鼠标悬停功能影响div类.newsWrap中的所有H2元素。

有更优雅的方式来实现你所追求的目标，但我已经将它留下来以保持简单。如果你想影响页面上的所有H1和H2标签（不仅仅是div类.newsWrap中的那些标签，只需从上面出现的任何地方删除单词.newsWrap。

希望有所帮助。

无法在不破坏jQuery引用的情况下验证XHTML

2 个答案: