如何将jQuery.hover（）与溢出结合使用-HowtousejQuery.hover()incombinationwithOverflow

1  

Instead of closing a .newsentry when the cursor goes out of it, a solution can be to close it only when it enters another .newsentry or when it leaves #newsblock. The scrollbar being part of #newsblock, the entry isn't closed anymore when you go on it.

当光标离开时,不是关闭.newsentry,而是只有当它进入另一个.newsentry或离开#newsblock时才能关闭它。滚动条是#newssblock的一部分,当你继续它时,该条目不再关闭。

EDIT: Following our discussion about the scroll issue, I added a step callback to the closing animation to make sure that the top of the .newsentry getting opened remains visible when the other entries are getting closed.

编辑:在我们讨论了滚动问题之后,我添加了一个关闭动画的步骤回调,以确保在其他条目关闭时,.newsentry的顶部仍然可见。

Here is a working example:

这是一个工作示例:

var $newsblock = $("#newsblock");

function closeAllNews(slideUpArgs){
    return $(".newstext").stop(true).slideUp(slideUpArgs);
}

function openNews(news, slideDownArgs){
    $(news).find(".newstext").stop(true).slideDown(slideDownArgs);
}

function ensureNewsTopVisible(news){
  // Check if the top of the newsentry is visible...
  var top = $(news).position().top;
  if(top <0){
    // ...and if not, scroll newsblock accordingly.
    $newsblock.scrollTop($newsblock.scrollTop() + top);
  }
}

$(".newsentry").each(function(){
    var $this = $(this);
    // When the mouse enter a news entry...
    $this.on("mouseenter", function(){
        // ...close all opened entries (normally there is at most one)...
        closeAllNews({
          // (while making sure that the top of this entry remains visible
          // at each step)
          step: ensureNewsTopVisible.bind(null, $this)
        });
        // ...open this newsentry.
        openNews($this);
    });
});

// When the mouse get out of the newsblock, close all news.
$newsblock.on("mouseleave", closeAllNews);

.newstitle {
    font-size: 2em;
}
.newstext {
    display: none;
}
#newsblock {
    max-height: 150px;
    overflow: scroll;
}

    

        

            
News 1
            

        
        

            
News 2
            

        
        

            
News 3
            

        
        
    

0  

Try this:

$(".newsentry, .newsblock").hover( // <-- changed
        function() {
            $(this).children(".newstext").stop(true,true).slideDown();
        },
        function() {
            $(this).children(".newstext").stop(true,true).slideUp();
        }
    );

This makes sure the block stays open when you hover either over the header or the block itself.

当您将鼠标悬停在标题或块本身上时,这可确保块保持打开状态。

Is that what you mean?

你是这个意思吗?

0  

There would be a joke , if i am wrong .. what i thing just change your css as

如果我错了,会有一个笑话。我只想改变你的css

/* not .newsblock **/
      #newsblock {
                height: 200px;
                overflow-y: scroll;/* not auto*/
            }

0  

It will be a lot better if you use click operation instead of hover to slide down news text block because the user can accidentally hover over any of the news entry in order to reach for the scroll bar. I think you need a accordion like functionality. You can use the below code if you are fine with click instead of hover.

如果您使用点击操作而不是悬停以向下滑动新闻文本块,那将会更好,因为用户可能会意外地悬停在任何新闻条目上以便到达滚动条。我想你需要一个类似手风琴的功能。如果你没有点击而不是悬停,你可以使用下面的代码。

$(".newsentry").click(
        function() {
            $(".newstext").stop(true,true).slideUp();
            $(this).children(".newstext").stop(true,true).slideDown();
        }
    );

Or use the below one to go with hover.

或者使用下面的一个来悬停。

$(".newsentry").hover(
    function() {
        $(".newstext").stop(true,true).slideUp();
        $(this).children(".newstext").stop(true,true).slideDown();
    },
    function(){}
);

This will not close the news text block until you accidentally hover over another news entry.

在您意外地将鼠标悬停在另一个新闻条目上之前,这不会关闭新闻文本块。