老师,点击添加购物车这块有点懵

老师,点击添加购物车这块有点懵

老师,点击添加购物车这块有点不知道如何下手,实现思路是什么以及有没有事例参考一下

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好同学,购物车这一块的正确效果是鼠标移入的时候会显示下拉菜单,鼠标移出的时候下拉菜单隐藏,所以这里可以绑定一个hover事件

http://img1.sycdn.imooc.com//climg/5cdd20ba0001e09201200064.jpg

思路如下:

html结构上要把下拉菜单与购物车按钮放在一个div容器里面,参考代码如下:

http://img1.sycdn.imooc.com//climg/5cdd21570001bdc007480146.jpg

样式上下拉菜单要使用定位,把它移动到按钮的下边显示。(让它脱离文档流是因为下拉菜单显示的时候不会把下面的内容往下面挤)。记得父元素盒子要设置相对定位,让它成为子元素下拉菜单的参照点。

下拉菜单默认可以设置display: none;隐藏。

js中为父元素car绑定一个hover事件,使用show()和hide()来设置子菜单的显示和隐藏。参考如下:

http://img1.sycdn.imooc.com//climg/5cdd22540001969604500153.jpg

并且可以在事件里面设置按钮的移入移出样式哦。可以参考思路尝试做一做,如果练习的过程中哪里卡住了,可以粘贴代码提问,老师会帮助你指导。

祝学习愉快 ,望采纳。

  • 慕盖茨9092533 提问者 #1
    老师,这个我知道的。点击商品内容添加到购物车,以及点击差号从购物车删除等效果有没有例子可以参考
    2019-05-16 17:48:31
  • 好帮手慕夭夭 回复 提问者 慕盖茨9092533 #2
    你好同学,没有例子,因为本作业中没有要求这样的功能,同学不用做哦。
    2019-05-16 20:20:44
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师