代码：

<!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. visual studio 中将选中代码相同的代码的颜色设置，修改高亮颜色

    这是一个很实用的功能,默认的设置里不是很明显,设置完之后效果图如下: 具体设置方法是: 1. 菜单:工具  -> 选项  ->环境  ->字体和颜色 2. 在右边的 "显示 ...

  2. SUSElinux的pam模块中$ISA变量的作用

    目的:限制非wheel用户切换至root 方法:vi /etc/pam.d/su文件,增加如下两行 auth sufficient /lib/security/pam_rootok.soauth re ...

  3. Chapter 17_2 备忘录函数

    一项通用的编程技术:用空间换时间. 例如有一种做法就可以提高一些函数的运行速度,记录下函数计算的结果,当再次调用该函数时,便可以复用之前的结果. 比如,一个普通服务器,在它收到请求中包含Lua代码,会 ...

  4. Byte Array to Hexadecimal String

    Lookup Text: 23,879.41 (20.8X faster) Sentence: 1.15 (23.9X faster) /// <summary> /// Hex stri ...

  5. JavaScript-Curry

    Currying allows you to easily create custom functions by partially invoking an existing function. He ...

  6. jx problem

    Entity: line 37: parser error : xmlParseEntityRef: no nameecho "xxxxxx > /dev/null 2>& ...

  7. perl-Thread-Queue for openwrt

    在centos7下运行 openwrt trunk的时候提示需要perl-thread-queue. yum install perl-thread-queue,提示没有这个文件.百度和google, ...

  8. 一个小时快速搭建微信小程序

    「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的 ...

  9. Hibernate5-课程笔记2

    单表的增删改查操作: (1)定义获取Session和SessionFactory的工具类: package com.tongji.utils; import org.hibernate.Session ...

  10. hexo常用命令笔记

    hexo npm install -g hexo npm update -g hexo hexo init 常用 hexo n == hexo new "a new post" 新 ...