qpash Posted August 27, 2018 Share Posted August 27, 2018 HI! How to make text highlighting when hovering the mouse over a component by means of JS? Need for unilabel, unicheckbox and uniradiobutton. Как сделать подсветку текста при наведении мыши на компонент средствами JS? Нужно для unilabel, unicheckbox and uniradiobutton Use licensed version Version:1.50.0 build 1479 Link to comment Share on other sites More sharing options...
Sherzod Posted August 27, 2018 Share Posted August 27, 2018 Здравствуйте, Вы можете попробовать это сделать через custom CSS + overCls конфиг я думаю Link to comment Share on other sites More sharing options...
Serg Posted August 27, 2018 Share Posted August 27, 2018 procedure TMainForm.UniLabel1MouseEnter(Sender: TObject); begin UniLabel1.Font.Color:=clRed; end; procedure TMainForm.UniLabel1MouseLeave(Sender: TObject); begin UniLabel1.Font.Color:=clGreen; end; Link to comment Share on other sites More sharing options...
qpash Posted August 27, 2018 Author Share Posted August 27, 2018 Мне нужно средствами CSS. Пытаюсь сделать плавное подчеркивание и смена цвета текста - не работает в GUI, хотя в редакторе работает нормально ( пробовал тут https://codepen.io/pen ) HTML: <p class="fun-hover"><b>TEST STRING</b></p> CSS: .fun-hover { background-image: -webkit-linear-gradient(left, transparent 65%, complement(#00aeff) 80%); background-image: linear-gradient(to bottom, transparent 65%, complement(#00aeff) 80%); background-position: 150; background-size: 200%; -webkit-transition: all 0.4s; transition: all 0.4s; color: black; } .fun-hover:hover { background-position: -100%; color: complement(#00aeff); } Link to comment Share on other sites More sharing options...
qpash Posted August 27, 2018 Author Share Posted August 27, 2018 События MouseEnter и MouseLeave нет в unicheckbox! Link to comment Share on other sites More sharing options...
Serg Posted August 27, 2018 Share Posted August 27, 2018 Ну я и написал только для UniLabel) Link to comment Share on other sites More sharing options...
Sherzod Posted August 27, 2018 Share Posted August 27, 2018 Мне нужно средствами CSS. Пытаюсь сделать плавное подчеркивание и смена цвета текста - не работает в GUI, хотя в редакторе работает нормально ( пробовал тут https://codepen.io/pen ) HTML: <p class="fun-hover"><b>TEST STRING</b></p> CSS: .fun-hover { background-image: -webkit-linear-gradient(left, transparent 65%, complement(#00aeff) 80%); background-image: linear-gradient(to bottom, transparent 65%, complement(#00aeff) 80%); background-position: 150; background-size: 200%; -webkit-transition: all 0.4s; transition: all 0.4s; color: black; } .fun-hover:hover { background-position: -100%; color: complement(#00aeff); } Какой браузер используете ? Link to comment Share on other sites More sharing options...
qpash Posted August 27, 2018 Author Share Posted August 27, 2018 Я разобрался, если ставить цвет complement(color), то не работает, надо ставить цвет HTML. Спасибо! Link to comment Share on other sites More sharing options...
qpash Posted August 27, 2018 Author Share Posted August 27, 2018 Единственное что не получилось в этом коде, чтобы цвет самого текста менялся, если есть мысли - подскажите. Вот полный рабочий код CSS (без цвета текста) .fun-hover { background-image: linear-gradient(to bottom, transparent 100%, #18BC9C 100%); background-position: 150; background-size:200%; -webkit-transition: all 0.4s; transition: all 0.4s; } .fun-hover:hover { background-position: -100%; background-image: linear-gradient(to bottom, transparent 0%, #18BC9C 80%); } Link to comment Share on other sites More sharing options...
Sherzod Posted August 27, 2018 Share Posted August 27, 2018 Добавьте это правило тоже (ну к примеру это для UniLabel): label.fun-hover:hover { color: red; } Link to comment Share on other sites More sharing options...
qpash Posted August 27, 2018 Author Share Posted August 27, 2018 Спасибо! Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now