代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:300px;
            height:145px;
            position:relative;
            border:3px solid #eee;
        }
        div:hover {
            border:3px solid red;
        }
        div:before {
            content: "";
            position:absolute;
            border:1px solid #ff794f;
            top:8px;
            bottom:8px;
            left:8px;
            right:8px;
            transform: scale(0,1);
            transition: transform 0.5s;
        }
        div:hover:before{
            border:1px solid red;
            transform: scale(1);
            transition: transform 0.5s;

        }
   </style>
</head>
<body>
<div></div>
</body>
</html>

效果图：

 

京东商品hover效果的更多相关文章

  1. 【javascript】京东商品浏览放大镜效果

    1.onclick点击小图可以切换图片 2.onmouseover显示黄色div与放大图片的div 3.onmouseout,2的内容消失 4.onmousemove黄色div跟随鼠标移到,但是不能超 ...

  2. e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step （一） 京东 商品搜索

    之前有发布一篇文章“e2e 自动化集成测试 环境搭建 Node.js Selenium WebDriverIO Mocha Node-Inspector”, 主要是讲了,如何搭建环境, 其中开发环境使 ...

  3. 利用selenium爬取京东商品信息存放到mongodb

    利用selenium爬取京东商城的商品信息思路: 1.首先进入京东的搜索页面,分析搜索页面信息可以得到路由结构 2.根据页面信息可以看到京东在搜索页面使用了懒加载,所以为了解决这个问题,使用递归.等待 ...

  4. Web页面中5种超酷的Hover效果

    hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这 ...

  5. 手机网页中的hover效果实现

    js文件 function mouseout(obj) { var className ="hover"; var _ecname = obj.className; if (_ec ...

  6. 【1】Hover 效果收集

    各种 hover 效果  github repository>>  git 仓库 1. 背景图的 hover 效果 原页面>> githubSite>>

  7. python制作爬虫爬取京东商品评论教程

    作者:蓝鲸 类型:转载 本文是继前2篇Python爬虫系列文章的后续篇,给大家介绍的是如何使用Python爬取京东商品评论信息的方法,并根据数据绘制成各种统计图表,非常的细致,有需要的小伙伴可以参考下 ...

  8. 【特效】体验很好的导航hover效果移出恢复当前位置

    很常见的一种导航的hover效果,鼠标放上后除了正常的hover,在移出整个导航后,会恢复当前栏目的特殊样式,分别有横向和纵向的导航.代码也比较简单,设置一个当前栏目的class,用index()找到 ...

  9. 一起学爬虫——使用selenium和pyquery爬取京东商品列表

    layout: article title: 一起学爬虫--使用selenium和pyquery爬取京东商品列表 mathjax: true --- 今天一起学起使用selenium和pyquery爬 ...

随机推荐

  1. git的一些疑难点

    一 .git reset,git revert,git checkout的区别和联系 主要参考:http://www.cnblogs.com/houpeiyong/p/5890748.html git ...

  2. 使用canvas实现超绚丽的旋转正方形

    自己无意中的一个小"bug",却让动画变得超绚丽= = 所以,不要害怕出bug,谁知道bug不会开出一朵绚丽的花呢? <!DOCTYPE html> <html ...

  3. 今天学习的裸板驱动之存储控制器心得（初始化SDRAM）

    CPU只管操作地址,而有些地址代表的是某些存储设备. 但是操作这些存储设备需要很多东西,比如需要制定bank,行/列地址等.所以就有了存储管理器,用来处理这种CPU操作的地址和存储设备间的转换. (1 ...

  4. vlc-android1.8.0的全部源代码[包括C语言]

    我们基于vlc,整理出了vlc-android1.8.0的全部源代码, 并增加了LibVLC的简单调用, 您只需要7行代码,就可以完成调用,和原生的MediaPlayer类似. 下载地址https:/ ...

  5. 《C++反汇编与逆向分析技术揭秘》——观察各种表达式的求值过程

    ---恢复内容开始--- 加法: 示例: 常量相加,则在编译期间就计算出两个常量相加后的结果,直接将这个结果参与运算,减少了运行期的计算.当有变量参与运算时,会先取出内存中的数据,放入通用寄存器中,再 ...

  6. DB2数据库实例创建与删除 学习笔记

    以root身份执行 $DB2HOME/instance/db2idrop -f 实例名,注意一定要加-f,否则不会删除实例下面sqllib文件.如果不幸忘了,执行db2icrt,会报sqllib文件存 ...

  7. Laravel默认使用utf8_unicode_ci 即使数据库是utf8_general_ci

    这样做的后果是,不方便和utf8_general_ci字符串字段进行JOIN查询ON.

  8. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  9. PowerTool(杀毒辅助工具) V4.6 中文免费绿色版

    软件名称: PowerTool(杀毒辅助工具)软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 968KB图片预览: 软件简 ...

  10. 用sql实现汉字转拼音

    有时我们会需要将汉字转为拼音,例如需要将省市转为拼音后当做编码存储(尽管国家有统一的标识码,但有时候我们还是会用到),网络上也有工具提供汉字转拼音的功能,但各有优劣,一般转拼音后还会存在带声调的字母, ...