代码：

<!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. 第9章 创建Web数据库

    1.登录MySQL: mysql -h hostname -u username -p password *-h 用于指定所希望连接的主机,即运行MySQL服务器的机器: -u 用于指定连接数据库时使 ...

  2. C#-实验3

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. NullSafe 的原理

    摘要 NullSafe is a simple category on NSNull that returns nil for unrecognised messages instead of thr ...

  4. hdu5976贪心乘法逆元

    hdu 5976 Detachment题目连接 题意: 给定一个自然数x,让你给出一种拆分方式n=a1+a2+...(ai≠aj),使得每个小部分的乘积s=a1*a2*...最大 解题思路: 我们要乘 ...

  5. CentOS单独编译安装PHP gd库扩展

    注意:如果您已经编译安装过GD库,请重新编译安装php不带gd库成功后,执行以下操作 安装libpng wget http://jaist.dl.sourceforge.net/project/lib ...

  6. ios下点击穿透focus获取问题

    在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现 ...

  7. IIS添加服务

    最近心血来潮,想学习一下WCF,看着网上的一个小例子就开始动手了. 写了一个简单的服务,准备发布时,才发现很多问题,根本不能像网上的那些大神一样“易得”. 其中遇到的一个的典型问题,就是提示为下载的文 ...

  8. jmeter命令行运行-单节点

    jmeter有自己的GUI页面,但是当线程数很多或者现在有很多的测试场景都是基于linux下进行压测,这时我们可以使用jmeter的命令行方式来执行测试,该篇文章介绍jmeter单节点命令运行方式. ...

  9. redis cluster中添加删除重分配节点例子

    redis cluster配置好,并运行一段时间后,我们想添加节点,或者删除节点,该怎么办呢. 一,redis cluster命令行     //集群(cluster)  CLUSTER INFO 打 ...

  10. Javascript Date 判断输入日期是否正确

    JavaScript的Date对象有容错性,可将随意给定的日期的年月日自动生成正确的日期时间 //JavaScript中Date对象容错性 function dateCheck(){ var date ...