मैं गतिशील टेम्पलेट के साथ काम कर रहा हूं जहां एचटीएमएल कोड बैक-एंड से उत्पन्न होता है (टाइपस्क्रिप्ट को बैक-एंड के रूप में उपयोग करके)। मैं inline css को hover पर लिखना चाहता हूं। पहले से ही यह कोड लिखा है लेकिन यह काम नहीं करता है।

style=":hover { height: 72%; width: 117%;}; cursor:pointer; height:70%; width:115%;"

कोड नमूना:

<img class="ImgStyle1" src="{{item.FrontPage}}" id="iCapImg" name="nBookImg{{i}}" (click)="fullScreenImage($event)" alt="{{item.Caption}}" style=":hover { height: 72%; width: 117%;}; cursor:pointer; height:70%; width:115%;">

किसी भी सहायता की सराहना की जाएगी।

0
Majedur 1 अक्टूबर 2019, 08:48
का संभावित डुप्लिकेट प्रश्न/1033156/…
 – 
Sergiu Molnar
1 अक्टूबर 2019, 08:56
तुमने ऐसा क्यों करना चाहोगे? यह अनावश्यक रूप से html को जटिल बना देगा। मैं इसे संभालने के लिए css कक्षा बनाने का सुझाव दूंगा।
 – 
shaktimaan
1 अक्टूबर 2019, 08:56
यह गतिशील टेम्पलेट है जो बैक-एंड से उत्पन्न होता है। तो CSS क्लास यहाँ तुरंत काम नहीं करती है।
 – 
Majedur Rahaman
1 अक्टूबर 2019, 09:00
उस स्थिति में, जैसा कि @SergiuMolnar द्वारा टैग किए गए उत्तर में बताया गया है, आपको इसे typescript में संभालना चाहिए।
 – 
shaktimaan
1 अक्टूबर 2019, 09:03
का संभावित डुप्लिकेट /…
 – 
giuseppedeponte
1 अक्टूबर 2019, 09:11

2 जवाब

सबसे बढ़िया उत्तर

मैरीनाह की टिप्पणी के लिए अपडेट किया गया धन्यवाद

वहाँ एक समस्या है कि [ngStyle] किसी वस्तु को इन-लाइन स्वीकार नहीं करता है

<p [ngStyle]="{background-color:red}"> /**ERROR**/

एक तरीका है मूसओवर माउस का उपयोग करना, एक चर और [style.property], कुछ पसंद

<img (mouseover)="mouseOver=true" 
   (mouseout)="mouseOver=false" 
   [style.height]="mouseOver?'72%':'70%'
   [style.width]="mouseOver?'117%':'115%'
   ...
   class="ImgStyle1" 
   src="{{item.FrontPage}}" 
   id="iCapImg" name="nBookImg{{i}}" 
   (click)="fullScreenImage($event)" 
   alt="{{item.Caption}}"
</img>

दूसरा मरियान्नाह का जवाब

0
Eliseo 1 अक्टूबर 2019, 09:54
आप इसे इनलाइन कर सकते हैं।
 – 
user4676340
1 अक्टूबर 2019, 09:49
@Maryannah, क्या आप मुझे एक उदाहरण दे सकते हैं? (यह विडंबना नहीं है, वास्तव में मुझे पता है कि कैसे)
 – 
Eliseo
1 अक्टूबर 2019, 09:51
क्षमा करें, मैंने आपका उत्तर नहीं देखा ::glups::
 – 
Eliseo
1 अक्टूबर 2019, 09:52
अजीब ... वैसे कोड पतला है : <div #ref (hover)="ref.style.width = '100%'" [style.width.%]="50">
 – 
user4676340
1 अक्टूबर 2019, 09:53
बस याद आया कि कोई होवर हुक नहीं है, इसलिए इसके बजाय <div #ref (mouseenter)="ref.style.width = '100%'" (mouseleave)="ref.style.width = '50%'" [style.width.%]="50"> (लेकिन अभी भी इनलाइन) होगा
 – 
user4676340
1 अक्टूबर 2019, 09:56

इसे इनलाइन करने के लिए (बदसूरत हो सकता है लेकिन हे, आपने इसके लिए कहा था)

<div #ref (mouseenter)="ref.style.width = '100%'" (mouseleave)="ref.style.width = '50%'" [style.width.%]="50">

यह बस है

होवर पर, प्रोग्रामेटिक रूप से दृश्य चाइल्ड एलिमेंट की शैली बदलें

0
1 अक्टूबर 2019, 09:56