鼠标移走时,鼠标悬停hover样式不消失

问题描述

在使用分页组件时,点击页码跳转,在页码较多时点击当前显示的最大的页码,会加上active样式,但是新加载出来的页面也会加上‘active’。样式并且在点击其他位置时,该样式会消失
例如图一中点击第‘8’页,第‘8’页会加上‘active’样式,后面加载出来第九页第十页,第十页也会有‘active’样式。如图二:

图一

图二

问题分析

在点击了第‘8’页时,新加载出第九页第十页,此时鼠标的位置切换到了第十页的位置,由于在样式中加了:focus伪类会自动添加点击后的效果,变造成了上述的问题

解决办法

删除样式的:focus伪类,或者将:focus样式改成当前未选中页码的样式,将原来的:focus覆盖。

原文地址:https://www.cnblogs.com/yonglei/p/8981603.html

时间: 2024-11-10 13:18:30

鼠标移走时,鼠标悬停hover样式不消失的相关文章

鼠标移到行上显示,移出消失效果

$("tr.tr_data").hover(function(){ $(this).find('.fa-close').show(); }, function(){ $(this).find('.fa-close').hide(); } );   $('i.delete-report-item').click(function(){ var itemId=$(this).attr('itemId'); if(!confirm('Are you sure to delete this i

WP/UWP设置ListView、ListBox选中、鼠标悬停背景/样式

最近抽空一直在边学边写UWP,后台还好,碰见UI的问题经常脑袋大.这是一个简单但是很不容易做到的事情,特别是对于我这种比较懒的.网上查资料少之又少,大部分都是andriod,所以查一个东西往往会花很多时间. 因为经常碰到ListView或者ListBox之类的选中.鼠标悬停样式和自己设置的主题颜色不搭,这时就需要改变这些样式了,而这里我通过ListBox来说明,大致思路其实就是重新定义ListBoxItem的Template. 第一步:去掉所有的样式,也是就是所有样式都不要. <Style x:

JQ特效开发系列——鼠标移入时div高度和颜色发生变化 animate

需要展示的jQuery效果: 同一级别下有5个div,当鼠标移上任意一个div的时候,该div背景颜色和高度都发生变化,移出时背景颜色和高度都恢复为原来设置的样式,高度的变化过程是渐变,背景颜色的变化在高度变化之后进行. 基本结构样式代码: <style> * { margin: 0; padding: 0; } html,body { height: 100%; } .main div{ width: 800px; height: 80px; margin-bottom: 10px; bac

超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容

一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ width: 100px; overflow: hidden; /*对超出容器的部分强制截取,高度不确定则换行*/ text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本.*/ white-space: nowrap; /*禁止换行*/ } 三.我们还想显示省略掉的,怎么办

DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此DIV指定3个关键样式{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} 指定样式后,文本超长已经会显示省略号了.如果想鼠标移上去显示全文的话,有2个办法: 一个是把全部文本写在div的title属性里面,还有一个办法是在原

鼠标移到图片变化的三种写法(可移植性强、代码少)

当鼠标移动到某个图片的时候,图片变化.当鼠标移出去的时候,图片变回来.下面是三种写法:第一种,也是最笨,最麻烦的写法,如下: 1 $(".web-footer2 .inner").each(function(){ 2 $(this).find("ul").eq(1).find("img").eq(0).hover(function(){ 3 $(this).attr("src","/img/footer-qq2.pn

转:纯CSS实现“鼠标移过显示层”效果

利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www.cnblogs.com/eecc/articles/2225473 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

内容太多用省略号代替、内容不换行,鼠标移上去显示详情

//然后是 内容太多用....表示.内容不换行,鼠标移上去显示详情 //这类问题最简单的肯定是使用css解决 // //1. table-layout: fixed 由于table-layout的默认值是auto, //即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了, //fixed一下就好了.(注意:此样式是关键) // //2. white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少, //都不会自动换行,此时

JS实现鼠标移上去图片停止滚动移开恢复滚动效果

这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例,那个是一块块的的滚动==>实现图片的循环滚动 . 这次我们就做滚动区域是平滑循环滚动效果. 下边是布局的HTML代码,原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示的图的大div(.in_img), <div class=" ban_img">