<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.menus{

}
.menus .menu{
float:left;
margin-left:4px;
}
.menus .menu button{
padding:4px;
}
.menus ul.sub-menu{
background:#c1d2e3;
}
.menus ul li{
padding-left:4px;
}
</style>
</head>
<body>
<div id="example">
<!-- <div class="menus">
<div class="menu">
<button>
{buttonName}
</button>
<ul class="sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

<div class="menu">
<button>
{buttonName}
</button>
<ul class="sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div> -->
</div>
<script type="text/babel">
var Menu = React.createClass({
mover : function() {
this.setState({
open : true
});
},
mout : function() {
this.setState({
open : false
});
},
getInitialState : function() {
return {
open : false
}
},
render : function() {
return (
<div className="menu">
<button onMouseOver={this.mover} onMouseOut={this.mout}>
{this.props.menuData.name}
</button>
<ul className="sub-menu" style={{display:this.state.open ? "block" : "none"}}>
{this.props.menuData.arr.map((el, index) => {
return (<div key={index}>{el}</div>)
})}
</ul>
</div>)
}
});
var Menus = React.createClass({
render : function() {
return (<div className="menus">
{this.props.data.map((el ,index)=>{
return (<Menu key={index} menuData={el}/>)
})}
</div>);
}
});
var data = [
{
name : "menuName",
arr : [
"menu1",
"menu2",
"menu3",
"menu4"
]
},
{
name : "menuName1111",
arr : [
"menu-1",
"menu-2",
"menu-3",
"menu-4"
]
}
];
ReactDOM.render(<Menus data={data} />, document.getElementById("example"));
</script>
</body>
</html>

React实现了一个鼠标移入的菜单栏效果的更多相关文章

  1. WPF在后台中写一个鼠标移入移出的操作

    在这个问题上我纠结了好久就是为了一个问题就是forebackground这个属性 lblPwd.Foreground = Brushes.Black;我以前一直以为是fontground这个属性可是我 ...

  2. 从外国html5网站上扒来一个鼠标经过的css3 效果，感觉很不错

    鼠标经过的时候,感觉有点像一张纸卷上去的感觉. 下面是代码 <div class="main-container types"> <div class=" ...

  3. css 鼠标移入边框填充效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  5. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  6. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  7. Jquery事件：鼠标移入移出(mouseenter,mouseleave)

    前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...

  8. JS鼠标移入，移出事件

    该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...

  9. 关于js判断鼠标移入元素的方向--解释

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

随机推荐

  1. ThinkPHP5的数据操作和Thinkphp3.2.3对比小结

    前言: 由于Thinkphp5和Thinkphp3.2.3的版本差距过大, 在记忆方面容易混淆. 故特意记录一下在数据操作上的对比的不同. Tp3.2.3 增:add(),addAll() 查:fin ...

  2. C# 中的冒泡排序

    int num; , , , , , , , , , }; ; i < arr.Length; i++) { ; j < arr.Length; j++) { if (arr[j] > ...

  3. day41-python多进程多线程-多线程共享

    线程共享变量多线程和多进程不同之处在于多线程本身就是可以和父进程共享内存的,这也是为什么其中一个线程挂掉以后,为什么其他线程也会死掉的道理. import threading def worker() ...

  4. oracle 导出某用户下的表

    exp test/test@orcl owner=test file=E:/all.dmp

  5. 调试lldb命令常用

    0.关于iOS的UI显示调试的三方控件 Reveal “po”命令是“print object”(打印对象)的简写.“$eax”是cup的一个寄存器.在一个异常的情况下,这个寄存器将会包含一个异常对象 ...

  6. windows2008 转 centos7 数据磁盘NTFS无损挂载

    转换时 原win硬盘里作为系统稳盘的硬盘必须重新格式化才能装机 数据盘在安装ntfs-3g可以直接挂载 几个重要命令: #lsblk  //查看硬盘情况 df -T 只可以查看已经挂载的分区和文件系统 ...

  7. 剑指Offer 49. 把字符串转换成整数 （字符串）

    题目描述 将一个字符串转换成一个整数(实现Integer.valueOf(string)的功能,但是string不符合数字要求时返回0),要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一 ...

  8. pytorch中，不同的kernel对不同的feature map进行卷积之后输出某一个channel对应的多个feature map如何得到一个channel的feature map

    实际上在卷积操作的时候,比如说,我某一层输出的feature map的size为4713*13 channel的数目为7,设经过某卷积层之后,网络输出的feature map的channel的数目为1 ...

  9. c语言笔记3运算符与表达式

    运算符与表达式 知识点一 操作数:参与运算的具体对象. 运算符:指明了对操作数进行的某项运算. 表达式:表示一个求值得规则.它由变量.常量.运算符和函数.括号按一定规则组成. 书写表达式的细节:1,运 ...

  10. 洛谷P1019：单词接龙（DFS）

    题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙" ...