होवर पर छवि बदलने से छवि पूरी पंक्तियों में बदल गई

Question

मैं एक <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>

सीएसएस:

.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 पर सेट कर रहा हूं। क्या कोई मेरी वहां मदद करेगा?

javascript css html-table

0

Saurav Sinha 1 अगस्त 2018, 09:21

ऐसा लगता है कि कोड ठीक है। लेकिन क्या आप संबंधित स्क्रिप्ट और संकलित सीएसएस को एक पहेली में साझा कर सकते हैं?

–

Pons Purushothaman

1 अगस्त 2018, 09:29

Answer 1

समस्या आपके द्वारा उपयोग किए जा रहे 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;
  }
}
}

1

Charu Maheshwari 1 अगस्त 2018, 09:31

क्षमा करें, लेकिन यह वह मुद्दा नहीं है जिसका मैं सामना कर रहा था

–

Saurav Sinha

1 अगस्त 2018, 10:15

कृपया बताएं कि आपकी समस्या क्या है?

–

Charu Maheshwari

1 अगस्त 2018, 10:35

Answer 2

मैंने माउस होवर पर फ़ंक्शन कॉल के साथ अपनी समस्या को ठीक किया, बस एनजी-माउस-होवर पर इंडेक्स वैल्यू पास की और छवि पर एक चेक जोड़ा जिससे मेरी समस्या हल हो गई।

 <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>

मेरा नियंत्रक-

vm.requestOnHover = function(index) {
  vm.hoverIndex = index;
  vm.requestHover = true;
};

0

Saurav Sinha 1 अगस्त 2018, 10:14

होवर पर छवि बदलने से छवि पूरी पंक्तियों में बदल गई

2 जवाब

संबंधित सवाल

नए सवाल