[英]Changing the image on hover changed the image on entire rows
I am showing an image inside a <td>
cell. 我正在显示
<td>
单元格内的图像。 On hover I am changing the image. 悬停时,我正在更改图像。 But it seems I am doing it wrong.
但是看来我做错了。
<td class="col-md-1">
<div class="request-container" popover-popup-delay=200 popover-enable="match.noOfRequests !== 0" ng-click="src.searchSummary($event, match, $index)" uib-popover-template="'./ui-search-result-summary.html'" popover-class="search-result-popover" popover-placement="left-top"
popover-trigger="'outsideClick'" ng-class="{highlighted: match.isRequestMatch}" id="popOverElement" ng-mouseover="src.requestHover = true" ng-mouseleave="src.requestHover = false" ng-class="{'active': src.requestHover}">
<span class="result-request"> {{match.noOfRequests}} </span>
<img class="request-img" ng-src="{{(src.requestHover ) && 'img/sprites/Study.svg#Requests-White-View' || 'img/sprites/Study.svg#Requests-Brown-View'}}">
</div>
</td>
CSS: CSS:
.request-container {
width: 100%;
height: 90%;
padding-top: 10px;
cursor: pointer;
&.active {
background-color: $color-brown;
color: white;
text-decoration-color: white !important;
}
&:hover {
background-color: $color-brown;
color: white;
text-decoration-color: white !important;
}
}
requestHover
is a flag which I am setting to true
or false
on hover. requestHover
是我在悬停时将其设置为true
或false
的标志。 Could someone help me out? 有人可以帮我吗?
Problem is with the CSS snippet you are using. 问题在于您使用的CSS代码段。 I am modifying the CSS, please refer below.
我正在修改CSS,请参阅下面的内容。 Change the image hover to make it work.
更改图像悬停以使其正常工作。
.request-container {
width: 100%;
height: 90%;
padding-top: 10px;
cursor: pointer;
&.active {
background-color: $color-brown;
color: white;
text-decoration-color: white !important;
}
img {
&:hover {
background-color: $color-brown;
color: white;
text-decoration-color: white !important;
}
}
}
I fixed my problem with a function call on mouse hover just passed the index value on ng-mouse-hover and added a check on image solved my problem. 我通过鼠标悬停上的函数调用解决了我的问题,该函数刚刚在ng-mouse-hover上传递了索引值,并在图像上添加了检查以解决我的问题。
<td class="col-md-1" style= "padding:10 px">
<div class="request-container" popover-popup-delay=200 popover-enable="match.noOfRequests !== 0" ng-click="src.searchSummary($event, match, $index)"
uib-popover-template="'./ui-search-result-summary.html'" popover-class="search-result-popover" popover-placement="left-top" popover-trigger="'outsideClick'"
ng-class= "{highlighted: match.isRequestMatch}" id="popOverElement"
ng-mouseover = " src.requestOnHover($index)" ng-mouseleave = "src.requestHover = false" ng-class= "{'active': src.requestHover}">
<span class="result-request" > {{match.noOfRequests}} </span>
<img class= "request-img" ng-src="{{(src.requestHover && src.hoverIndex == $index ) && 'img/sprites/Study.svg#Requests-White-View' || 'img/sprites/Study.svg#Requests-Brown-View'}}">
</div>
</td>
My controller- 我的控制器
vm.requestOnHover = function(index) {
vm.hoverIndex = index;
vm.requestHover = true;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.