Question

我正在网站顶部的固定菜单上工作。如果将鼠标悬停在导航栏上，它会向下移动以显示链接。悬停是用css类实现的。

当您进入网站或滚动到顶部时，导航应完整显示。

我正在尝试使用与滚动进度一起使用的javascript方法来实现它。

＆＃13;

$(window).scroll(function() {
	var wS = $(this).scrollTop();
	if (wS > 200){         
		alert('you have scrolled to the h1!');
                $document.getElementById('awning').addClass('awning:hover');
   	        $document.getElementById('nav').addClass('awning:hover #nav');
     }
});

＆＃13;

它有意义还是有更好的方法呢？

警报甚至无法显示

Answer 1

您无法像这样分配pseudo-classes。伪类用于在特殊状态发生时定义元素样式（例如，悬停在元素上，链接已经被访问过）或元素在某种程度上是特殊的（首先是种类，甚至是等等。）

您必须在css中创建其他类，如下所示：

#awning.revealed{ /* notice there is no space between selectors */
    /*your css code goes here (same as in :hover)*/
}

然后只需将类添加到元素中：

 $document.getElementById('awning').addClass('revealed');

Answer 2

请使用以下代码并单击第二个值（200）

$('.wi').on( "click", function() {
    console.log('clicked');
    var temp = $('.wi');
    if (temp.hasClass('wi-celsius')) {
        alert("Current is 'Celsius'... updating it to 'Fahrenheit!'");
        var convertedTemp = parseInt(temp.text()) * 9 / 5 + 32;
		temp.text(convertedTemp);
		temp.removeClass('wi-celsius');
		temp.addClass('wi-fahrenheit');
    }else  {
        alert("Current is 'Fahrenheit'... updating it to 'Celsius!'");
        var convertedTemp = (parseInt(temp.text()) -32)/ (9/5);
		temp.text(convertedTemp);
		temp.removeClass('wi-fahrenheit');
		temp.addClass('wi-celsius');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul id="list">
    <li>100</li>
    <li>&nbsp;<i class="wi wi-celsius">200</i></li>
    <li>300</li>
 </ul>

这就是你需要的吗？

触发CSS：通过滚动

2 个答案: