鼠標懸停與餘燼

我是Ember的新手。我希望當我將鼠標懸停在.png文件上時，它是透明的，並在右側存在一個'X'按鈕，當您按下它時，它將從商店中刪除。任何想法或任何例子？我有這些文件：鼠標懸停與餘燼

showactivecamp.hbs

<style type="text/css"> 


    .image { 
     width: 190px; 
     height: 190px; 
     opacity: 1; 

    } 

    .image:hover { 
     opacity: 0.3; 
    } 

    i.fa-remove { 
    @extend . image : hover; 
     color: #fff; 
     background-color: #808080; 
     background-color: rgba(0, 0, 0, 0.5); 
     position: absolute; 
     top: 8px; 
     right: 8px; 
     padding: 2px; 
     z-index: 1; 
     cursor: pointer; 
    } 


</style> 

<div class="thmb-prev"> 

        <button type="button" class="fa fa-remove" {{action "removeCampaign" on="click"}}> 


        </button> 
        <img src="/assets/images/photos/media2.png" class="image" alt=""> 

       </div>

控制器\ showactivecamp.js

import Ember from 'ember'; 

export default Ember.ObjectController.extend({ 
    needs: ['campaign'], 

    actions: { 
     removeCampaign: function (campaign) { 

      var camp = this.get('model'); 
      camp.deleteRecord(); 
      camp.save(); 

     } 
    }, 

    getactivecamp: function() { 
     return this.store.findAll('campaign'); 
    }.property() 

});

意見\從 '餘燼' showactivecamp.js 進口灰燼;

export default Ember.View.extend({ 

    click: function (evt) { 
     this.get('controller').send('click', this.get('campaign')); 
    } 

});

來源

2014-10-29 thodwris

你有什麼到目前爲止不必要的看法？我願意幫忙，但也希望看到你的努力。祝你好運，歡迎來到SO。 – Travis 2014-10-29 19:39:57

這是一個css問題，用於從商店中刪除記錄，查看路線以及如何處理操作。 – 2014-10-29 20:20:51

查看更新後的帖子。 – thodwris 2014-10-30 13:58:01

我相信這樣的事情會用CSS來解決最好的處理，而不是建立在Javascript

http://emberjs.jsbin.com/jecew/1

來源

2014-10-31 06:28:54 alexdiliberto

非常感謝Alex！順便說一句，有什麼地方可以在線運行你的項目？ https://github.com/alexdiliberto/emberconf-2014-demo – thodwris 2014-10-31 08:12:46

不，現在不是現在，但只需要自己克隆倉庫並運行'ember serve'，真的很容易。由於演示版本是早期的CLI版本，因此它有點過時，但如果您需要有關應用程序分析處理的幫助，這些原則仍然可以很好地工作。當我有時間時，我會將演示移植到最新版本的EmberCLI – alexdiliberto 2014-10-31 13:58:09

您發佈了您的代碼，但未提及此問題。我不確定你遇到了什麼問題。

看看這個jsbin http://jsbin.com/xumomu/1。我已經使用FixtureAdapter。

UPDATE：

http://jsbin.com/xumomu/2/

我已包裹圖像和關閉圖標在被稱爲 '圖像' 視圖。 X圖標將在鼠標輸入時顯示，並將使用jQuery在鼠標離開時隱藏。

As Ember guide says, Use View when you need sophisticated handling of user events.

我建議你瀏覽一下文檔，以獲得關於在燼中查看和事件處理的清晰想法。

來源

2014-10-30 14:28:59 Susai

是的這樣的事情。但是我希望懸停圖像時出現x按鈕。 – thodwris 2014-10-30 18:45:29

謝謝。我會嘗試。 – thodwris 2014-10-31 08:11:10

歡迎。是的，如果你可以在CSS中處理它，那就太好了。 – Susai 2014-10-31 08:50:08

鼠標懸停與餘燼

回答

相關問題