药品说明图标增加鼠标进入状态

src/components/Treat/DrugTreat/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import style from './index.less';
 import info from './../img/info.png';
+import info1 from './../img/info1.png';
 import drugIcon from './../img/drug.png';
 import more from '@common/images/addItem1.png';
 import $ from "jquery";
@@ -8,16 +9,31 @@ import $ from "jquery";
 class DrugTreat extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            currentImg: -1
+        }
         this.handleSelect = this.handleSelect.bind(this);
         this.setOtherRecommend = this.setOtherRecommend.bind(this);
         this.setDrugInfo = this.setDrugInfo.bind(this);
         this.showTreatDesc = this.showTreatDesc.bind(this);
+        this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this)
     }
 
     handleSelect(index,ii) {
         const { selectDrug } = this.props;
         selectDrug && selectDrug(index,ii);
     }
+    handleMouseEnterImg(ii, index) {
+        this.setState({
+            currentIndex: index,
+            currentImg: ii
+        })
+    }
+    handleMouseLeaveImg() {
+        this.setState({
+            currentIndex: -1,
+        })
+    }
     setOtherRecommend(item, index) {
         this.showTreatDesc();
         const { setOtherRecommend } = this.props;
@@ -38,6 +54,7 @@ class DrugTreat extends Component {
 
     render(){
         const { treatment,showDrugInfo } = this.props
+        const { currentImg, currentIndex } = this.state
         return(
             treatment && treatment.length > 0 && <div className={style['drug-box']}>
                 <h3 className={style['drug-title']}><img className={style['drug-icon']} src={drugIcon}/> 常用药物治疗</h3>
@@ -53,7 +70,11 @@ class DrugTreat extends Component {
                                             onClick={()=>{it.forbidden === '2' ? '' : this.handleSelect(index,ii)}} style={it.selected ? {color: '#3B9ED0', borderBottom: '1px solid #3B9ED0'}:''}>
                                             {it.medicitionName}
                                         </span>
-                                        {<img className={style['info-img']} src={info} onClick={() =>{this.setDrugInfo(it);showDrugInfo();}}/>}
+                                        {<img className={style['info-img']}    
+                                              src={currentIndex === index ? (ii === currentImg ? info1 : info) : info} 
+                                              onMouseEnter={this.handleMouseEnterImg.bind(this, ii, index)}
+                                              onMouseLeave = {this.handleMouseLeaveImg}
+                                              onClick={() =>{this.setDrugInfo(it);showDrugInfo();}}/>}
                                         {it.forbidden === '1' ? <span className={style['info-flag']} style={{border: '1px solid #F4C051', background: '#F4C051',marginLeft: '5px'}}>慎用</span>: it.forbidden === '2' ? <span className={style['info-flag']} style={{border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''}, 使用率{it.rate}
                                         
                                     </span>)

src/components/TreatDesc/index.jsx

@@ -3,15 +3,30 @@ import style from './index.less';
 import $ from "jquery";
 import close from './img/close.png';
 import info from './img/info.png';
+import info1 from './img/info1.png';
 
 
 class TreatDesc extends Component {
     constructor(props){
         super(props);
+        this.state = {
+            currentIndex: -1
+        }
         this.hideTreatDesc = this.hideTreatDesc.bind(this);
         this.handleSelect= this.handleSelect.bind(this);
+        this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this)
     }
 
+    handleMouseEnterImg(index) {
+        this.setState({
+            currentIndex: index,
+        })
+    }
+    handleMouseLeaveImg() {
+        this.setState({
+            currentIndex: -1,
+        })
+    }
     handleSelect(index,ii) {
         const { selectDrug } = this.props;
         selectDrug && selectDrug(index,ii);
@@ -25,6 +40,7 @@ class TreatDesc extends Component {
     render(){
         const  { treatment, treatDesc, setDrugInfo, showDrugInfo} = this.props
         const { title, basic, otherDrugIndex, drugDesc} = treatDesc
+        const { currentIndex } = this.state
         return (treatment && treatment.length >0 && <div  className={style['treat-desc-box']}>
             
             {title && title === '药品推荐' ? <div className={style['similar-drug-box']} id='treatDescBox'>
@@ -50,7 +66,11 @@ class TreatDesc extends Component {
                             </span>
                         </span>              
                         
-                        {<img  onClick={() =>{setDrugInfo(item);showDrugInfo();}}  className={style['info-img']} src={info} />}
+                        {<img className={style['info-img']}    
+                            src={currentIndex === index ? info1 : info} 
+                            onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
+                            onMouseLeave = {this.handleMouseLeaveImg}
+                            onClick={() =>{setDrugInfo(item);showDrugInfo();}}/>}
                         {item.forbidden === '1' ? <span className={style['info-flag']} style={{border: '1px solid #F4C051', background: '#F4C051',marginLeft: '5px'}}>慎用</span>: item.forbidden === '2' ? <span className={style['info-flag']} style={{border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''}, 使用率{item.rate}
                         
                     </span>)