호버에 대한 녹아웃 문제

Question

녹아웃을 사용하여 일부 데이터를 바인딩하고 있습니다. 무엇이 잘 작동하고 있습니다. 하지만 이제는 일부 데이터를 바인딩해야하며 사용자가 마우스를 지나치면 일부 정보가 포함 된 메시지가 표시되어야합니다. 메시지

**My CSS:** 

.message{ 
    display:none; 
    color:#000; 
    background:#999; 
    position:absolute; 
    top:10px; 
} 

.mo:hover .message{ 
    background-color: yellow !important; 
    display:block !important; 
    z-index:10; 
} 

내 HTML :

function getGrayStatus() { 
     return "<a href='#'>" + 
      "<span class='mo' style='background-color:gray; padding-left: 100%;'>" + 
      "<p class='message'><b>my message</b></p>" + 
      "</span>" + 
      "</a>"; 
} 

JS 바인드 코드 : HTML에서

main.sellers.push(
    { 
     sellerCode: "1", totalClientsInRoute: "45", visitedClientsInRoute : "32", 
     notVisitedClientsInRout: "2", clientsWithSaleInRoute: "1", 
     percentageOfClientsWithSalesInRoute: "15", visitsOutOfPointInRoute: "1", 
     totalClientsOutOfRoute: "11", clientsWithSaleOutOfRoute: "15", 
     sales: [{ sale: getRedStatus() }, { sale: getGreenStatus() }, { sale: getGrayStatus() }} 

바인딩 :

<div class="dashboard-sellers-table-sales"> 
    <div class="table-row" data-bind="foreach: sales"> 
     <div class="table-cell" data-bind="html: sale"></div> 
    </div> 
</div> 

바인딩이 작동하고 있습니다. 문제는 메시지가 표시되지 않는다는 것입니다. 녹아웃을 사용하지 않고 테스트를하면 메시지가 표시됩니다.

Answer 1

전체 모델의 코드가 어떨지 모르겠지만 여기에 코드 조각 코드의 작동 예가 나와 있습니다. https://jsfiddle.net/kyr6w2x3/151/

보기 :

<!-- ko foreach: ItemList --> 
    <div class="dashboard-sellers-table-sales"> 
     <div class="table-row" data-bind="foreach: sales"> 
      <div class="table-cell" data-bind="html: sale"></div> 
     </div> 
    </div> 
    <!-- /ko --> 

JS :

var MainViewModel = function(){ 
    var self = this; 
    self.ItemList = ko.observableArray([{ 
     sellerCode: "1", totalClientsInRoute: "45", visitedClientsInRoute : "32", 
     notVisitedClientsInRout: "2", clientsWithSaleInRoute: "1", 
     percentageOfClientsWithSalesInRoute: "15", visitsOutOfPointInRoute: "1", 
     totalClientsOutOfRoute: "11", clientsWithSaleOutOfRoute: "15", 
     sales: [{ sale: getRedStatus() }, { sale: getGreenStatus() }, { sale: getGrayStatus() }] 
    }]); 
} 

var ItemViewModel = function(data){ 
var self = this; 
    self.sellerCode = data.sellerCode; 
    self.totalClientsInRoute = data.totalClientsInRoute; 
    self.visitedClientsInRoute = data.visitedClientsInRoute; 
    self.notVisitedClientsInRout = data.notVisitedClientsInRout; 
    self.clientsWithSaleInRoute = data.clientsWithSaleInRoute; 
    self.percentageOfClientsWithSalesInRoute = data.percentageOfClientsWithSalesInRoute; 
    self.visitsOutOfPointInRoute = data.visitsOutOfPointInRoute; 
    self.totalClientsOutOfRoute = data.totalClientsOutOfRoute; 
    self.clientsWithSaleOutOfRoute = data.clientsWithSaleOutOfRoute; 
    self.sales = ko.observableArray([]); 
    self.sales($.map(data.sales, function (item) { 
     return new SalesItemViewModel(item); 
    })); 
} 

var SalesItemViewModel = function(data){ 
    var self = this; 
    self.sale = data.sale; 
} 
var viewModel = new MainViewModel(); 
ko.applyBindings(viewModel); 

function getGrayStatus() { 
     return "<a href='#'>" + 
      "<span class='mo' style='background-color:gray; padding-left: 100%;'>" + 
      "<p class='message'><b>my GRAY message</b></p>" + 
      "</span>" + 
      "</a>"; 
} 
function getRedStatus() { 
     return "<a href='#'>" + 
      "<span class='mo-red' style='background-color:red; padding-left: 100%;'>" + 
      "<p class='message'><b>my RED message</b></p>" + 
      "</span>" + 
      "</a>"; 
} 
function getGreenStatus() { 
     return "<a href='#'>" + 
      "<span class='mo-green' style='background-color:green; padding-left: 100%;'>" + 
      "<p class='message'><b>my GREEN message</b></p>" + 
      "</span>" + 
      "</a>"; 
}