Gauge Hover Styling
You can use the standard ":hover" pseudo-class to add special effects to gauges when the mouse moves over them.
In this example, we customized the pointer and the thumb when the mouse mover over the gauges:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // This file locates: "Content/css/Lesson/C1Gauge/StylingHover.css"..wj-gauge { width: 50%; margin: 20px auto;}.wj-gauge .wj-face path { fill: #fefefe; stroke: #e0e0e0;}.wj-gauge:hover .wj-pointer { fill: orange; stroke: orange; stroke-width: 4px; transition: fill stroke stroke-width .3s;}.wj-radialgauge { height: 120px;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1GaugeController : Controller { // GET: StylingHover public ActionResult StylingHover() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <h1> @Html.Raw(Resources.C1Gauge.StylingHover_Title)</h1><p> @Html.Raw(Resources.C1Gauge.StylingHover_Text1)</p><p> @Html.Raw(Resources.C1Gauge.StylingHover_Text2)</p>@(Html.C1().LinearGauge().Id("linear") .Value(50).Max(100) .IsReadOnly(false).HasShadow(false).ThumbSize(12) .Face(f=>f.Thickness(0.25)) .Pointer(p=>p.Thickness(0.25)) )@(Html.C1().RadialGauge().Id("radial") .Value(50).Max(100) .IsReadOnly(false).HasShadow(false) .ShowText(ShowText.Value).ThumbSize(6) .Face(f=>f.Thickness(0.05)) .Pointer(p=>p.Thickness(0.05)) ) |