面向对象第一次伟大尝试（失败）

  
  



  
珠宝玉器>
  
珠宝玉器>
  
珠宝玉器>
  
珠宝玉器>
  
珠宝玉器>

*{padding :0;margin:0;font-family:微软雅黑,Arial; }
li{list-style: none}
#ct{
  margin : 10px;
  max-width : 15em;
  background: #e12;
  
}
.list{
  position:relative;
  font-size:1.1em;
  color:#fff;
  margin:0 0.5em;
  padding:0.5em 0.5em;
  border-top:0.2px dotted rgba(200,200,200,0.5) ;
  cursor : pointer;
  vertical-align: middle; 
}
.list:first-child{border:0}
.list>span{
  position:relative;
  left:6em;
  font-size : 1.2em;
}
.list2{
  position:absolute;
  left:15em;
  border:1px solid;
}

  this.seats = seats
  this.prepareHtml()
  this.mount()
  this.close()
}


 items.prototype.prepareHtml = function(){
  var {seat1,seat2,seat3,seat4}= this.seats
  var div = this.div =document.createElement('div')
  div.className = 'list2'
  var html =`
      
${seat1}
${seat2}
      
${seat3}
${seat4}
` 
   div.innerHTML = html

  
   }
 items.prototype.mount = function(){
   $('#ct').append(this.div)
}
 items.prototype.close = function(){
  var xxx = this.div
  $('.list').mouseleave(function(){ xxx.remove()})

}




 $('.list').mouseenter(function(){
  var secondList = new items({
    seat1 : '翡翠',
    seat2 : '玉石',
    seat3 : '宝石',
    seat4 : '水晶',
    seat5 : '玛瑙',
    seat6 : '珍珠'
  })
  

 })