代码：

<!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. 关于jquery 1.9以上多次点击checkbox无法选择的

    在jquery1.9之前,我们对于一个checkbox对象来进行重复选择或者取消, 我们可以使用这个方法$().attr('checked',checked);//选中 $().removeAttr( ...

  2. js中角度计算

    -. js 关于三角函数算法  弧度 和 角度的理解, 以及相互转换   角的两种单位 度 和 弧      1.弧度的定义       我们知道"度"的定义是,"两条射 ...

  3. ecshop3.0.0注入

    配个环境来演示给别人看..分析一下.flow.php文件缺陷,order_id在post请求没有单引号保护.造成注入 <?php elseif ($_REQUEST['step'] == 're ...

  4. [Android]Android SDk Manager中创建模拟器无法选择CPU问题解析

    方法一.正常下载所需sdk包 启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Setti ...

  5. centos安装ganttproject

    官网下载 http://www.ganttproject.biz/ 我的JAVA早已经安装了. 问题:root #ganttproject 提示org.bardsoftware.eclipsito.B ...

  6. 3-Dom

    HTML DOM 对象DOM DocumentDOM ElementDOM AttributeDOM Event Document对象 每个载入浏览器的 HTML 文档都会成为 Document 对象 ...

  7. EasyUI DataGrid 添加 Footer

    做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...

  8. 1、API

    基本API sectionsColor:['green','orange','red','grey'],//为每一层设置背景颜色 controlArrows:true,//是否显示幻灯片的左右按钮 v ...

  9. Javascript封装弹出框控件

    1.首先先定义好弹出框的HTML结构 <div class="g-dialog-contianer"> <div class="dialog-windo ...

  10. 七天学会ASP.NET MVC (四)——Layout页面使用和用户角色管理 （代码下载）

    中文翻译链接: http://www.cnblogs.com/powertoolsteam/p/MVC_four.html 360云盘: https://yunpan.cn/cYuEeLtXUvrgC ...