我在 <td>
中显示图像细胞。悬停时我正在更改图像。但似乎我做错了。
<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:
.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
是我设置为 true
的标志或 false
悬停。有人可以帮帮我吗?
最佳答案
问题出在您使用的 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;
}
img {
&:hover {
background-color: $color-brown;
color: white;
text-decoration-color: white !important;
}
}
}
关于javascript - 在悬停时更改图像会更改整行的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51626567/