Question

我正在努力做到这一点，以便当屏幕的宽度为1200px或更大时，我希望有一些悬停效果。如果屏幕尺寸小于1200像素，则不应发生悬停效果。

在1200px以上的屏幕中，将鼠标悬停在fun-stuff-slide元素上时，应该会显示2个按钮。悬停时，通过更改不透明度将它们隐藏。

在1200像素以下的屏幕中，按钮应该一直显示。

到目前为止，我无法使jQuery或CSS始终如一地工作。我知道调整大小就像输入测试控制台日志消息一样，只要调整屏幕大小，就会记录屏幕大小。此外，所有内容都可以在页面加载时正常工作，但是当您开始悬停时，事情就会中断。

这是jQuery：

        var $window = $(window);
        function checkWidth() {
            var windowsize = $window.width();


            if (windowsize > 1200) {
                console.log("larger screens");
                $('.fun-stuff-slider').hover(function () {
                    $learnButton = $(this).find('.button--learn-more');
                    $downloadButton = $(this).find('.download-now-link');
                    $downloadButton.css({ 'opacity': '1' });
                    $learnButton.css({ 'opacity': '1' });
                }, function () {

                    $downloadButton.css({ 'opacity': '0' });
                    $learnButton.css({ 'opacity': '0' });
                });
            }

            else {
                $learnButton = $(this).find('.button--learn-more');
                $downloadButton = $(this).find('.download-now-link')
                $learnButton.css({ 'opacity': '1' });
                $downloadButton.css({ 'opacity': '1' });
            }
        }

        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);

CSS：

.cta {
        position: relative !important;
        height: auto;
        color: white;
        width: auto;
        font-size: 1rem;
        font-weight: bold;
        margin-top: 6rem;
        opacity: 1;
        @include breakpoint(xlarge) {
            opacity: 0;
        }
    }

 a.button--learn-more {
    font-size: 1rem !important;
    order: 2;
    padding: 0.85em 0.33em;
    transform: translateY(-6rem);
    margin-bottom: 0;
    width: 152px;
    margin-left: auto;
    margin-right: auto;
    z-index: 9;
    opacity: 1;
    @include breakpoint(xlarge) {
        opacity: 0;
  }

HTML：

            <div class="extra-content coloring-container">
                @For Each coloringItem As Tuple(Of tblPage, KeyValuePair(Of tblFile, List(Of tblFile))) In ViewData("PublicShell")("Files")

                    @<div Class="item slick-slide slick-active fun-stuff-slider" data-slick-index="2" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 233px;">
                        <a class="button small button--learn-more" href="@(coloringItem.Item1.tblPageName.PageName)">Learn More <i class="fa fa-fw fa-arrow-circle-right" aria-hidden="true"></i></a>
                        <a href="@(ConfigurationManager.AppSettings("UploadDirectory"))@(coloringItem.Item2.Key.File)" target="_blank" tabindex="0" class="shared-dow">

                            @If coloringItem.Item2.Value.Count > 0 Then
                                @<img src="@(ConfigurationManager.AppSettings("UploadDirectory"))@(coloringItem.Item2.Value.First.File)" alt="@(coloringItem.Item2.Value.First.AltText)" class="coloring-thumbnail" />
                            End If

                            <div class="cta download-now-link">Download Now <i class="fa fa-download" aria-hidden="true"></i></div>
                        </a>
                    </div>
                Next
            </div>

Answer 1

使用此

var windowWidth = window.screen.width;

Answer 2

如果窗口小于1200，则删除悬停事件

else {
    ...//
    $('.fun-stuff-slider').off('hover');
  ..//

我建议您使用一个类并根据屏幕尺寸切换该类

Answer 3

正如@epascarello已经提到的那样，您不需要任何JS。这是一个悬停效果的示例，使用媒体查询只会在1200px以上触发。（将代码段作为完整页面打开以查看悬停效果）：

@media screen and (min-width: 1200px) {
  a:hover {
    background: red;
  }
}

<a href="#">Hover me</a>

有关更多信息，请查看MDN。

仅在1200像素及以上的屏幕上启用悬停效果

3 个答案: