代码：

<!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. android ViewStub延时渲染的应用

    android开发当中,我们经常会遇到根据某个条件去控制一个控件的显示/隐藏的情况.虽然setVisibility(int visibility)的确可以达到这样的目的,但是在渲染时,其实隐藏的布局也 ...

  2. 【转】gcc/g++ 如何支持c11 / c++11标准编译

     如果用命令 g++ -g -Wall main.cpp  编译以下代码 : 1 2 3 4 5 6 7 8 9 10 11 12 /*     file : main.cpp */ #include ...

  3. 给RelativeLayout设置背景，无效果bug解决

    drawable文件夹下面 tomyshop_selector.xml文件 <?xml version="1.0" encoding="utf-8"?&g ...

  4. Android之HandlerThread

    HandlerThread详解 1 HandlerThread基本原理 HandlerThread继承自Thread,它是一种可以使用Handler的Thread.它的实现很简单,就是在run方法中通 ...

  5. 前端 TDD 开发

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px ".PingFang SC"; color: #454545 } p.p2 ...

  6. 子查询 此处该用AND 而不是 WHERE

    条件:有一张账户表,一张订单表. 需求:求出所有role = 2 即客服人员,所有操作成功的订单数量.结果:能查出所有的客服人员名称,以及操作的订单数量(关键点在于,没有操作过订单,则数量显示为0) ...

  7. Swift中GCD与NSOperation相关

    GCD Swift 3必看:从使用场景了解GCD新API 常用写法: dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_ ...

  8. pgmpy包的安装，以及conda的安装

    pgmpy包的安装,以及conda的安装 pgmpy的官方网站是这样说明安装过程的: 链接:Installation 共有三个步骤,第一步是安装依赖包 首先它讲述了在linux下使用pip安装的方法: ...

  9. python 内嵌函数, 闭包, 函数装饰器

    一.  函数内嵌 闭包 在python中,函数可以作为返回值, 可以给变量赋值. 在python中, 内置函数必须被显示的调用, 否则不会执行. #!/usr/bin/env python #-*- ...

  10. C#与C++中struct和class的小结

    在C#中,struct其实也是可以像class一样封装方法和数据的.请参考如下代码. using System; namespace testDiffInStructClass { public st ...