如何获取鼠标悬停时当前元素的类名?例如

当鼠标从div到a时,我想获得div元素的类名.我如何使用jQuery获取它?
我想要css精灵(精灵图像总宽度:45px和总高度:15px由三个图像组成)但IE9/8/7中存在问题.链接和悬停工作,但单击按钮(活动)精灵图像滑动到左1px.仅针对IE 9/8/7的问题.如何解决这个问题?
CSS:
body{
margin:0;
padding:0;
}
.button{
background:url(sprite-image.png) no-repeat 0 0;
width:15px;
height:15px;
cursor:pointer;
}
.button:hover{
background:url(sprite-image.png) no-repeat -15px 0;
}
.button:active{
background:url(sprite-image.png) no-repeat -30px 0;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<body>
<div class="cont">
<div class="button"> </div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
"链接","悬停"和"活跃"FF,Chrome,Safari,Opera就是这样;

但IE 9/8/7活跃看起来像这样;

我将上面的图像具体化,使其看起来更好.我的精灵形象;

css internet-explorer css-sprites background-image internet-explorer-8
我想显示列出信息的相关工具提示,相关工具提示和信息在表格中的相同单元格中.我不想为此使用插件.当onmouseover到任何链接时,显示相关的工具提示,如果onmouseover到工具提示框,工具提示框将不会关闭.当除了工具提示框或相关链接在页面上的任何区域外,工具提示框将关闭.我想制作一个简单的工具提示,就像这个插件http://stevenbenner.github.io/jquery-powertip/ (鼠标到弹出示例).没有使用插件有没有一个简单的方法?
HTML
<table width="600">
<tr>
<td>
<a href="#" class="link">Link-1</a>
<div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</td>
</tr>
<tr>
<td>
<a href="#" class="link">Link-2</a>
<div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining …Run Code Online (Sandbox Code Playgroud) 我想创建一个不同颜色的盒子,左,右和顶部颜色为红色,底部颜色为灰色但我想要平底盒边框
HTML
<div class="ts"></div>
Run Code Online (Sandbox Code Playgroud)
CSS
.ts {
height:100px;
width:100px;
border-width:10px 10px 20px 10px;
border-style:solid;
border-color:#f00 #f00 #ddd #f00;
}
Run Code Online (Sandbox Code Playgroud)
当我使用上面的代码创建它时,它看起来像这样

但我不希望底边作为对角线,我想要它;

有没有一种简单的方法可以像crossbrowser那样做?
我使用select2 3.5.2和jquery验证1.13.1.我可以使用验证插件"highlight"方法为select2元素添加错误类,但是当我选择一个值时,我无法删除该错误类.我怎么解决这个问题?
HTML
<form id="test" class="frm">
<div>
<input type="text" name="name" />
</div>
<div>
<label for="singleselect"></label>
<select class="sl" id="singleselect" name="singleselect">
<option></option>
<option value="val1">Val-1</option>
<option value="val2">Val-2</option>
</select>
</div>
<div>
<label for="multipleselect"></label>
<select class="sl" id="multipleselect" name="multipleselect" multiple="multiple">
<option></option>
<option value="val1">Val-1</option>
<option value="val2">Val-2</option>
</select>
</div>
<button class="btn">Submit</button>
</form>
Run Code Online (Sandbox Code Playgroud)
JS
$(document).ready(function () {
$('.sl').select2({
placeholder:'Select'
})
$.validator.setDefaults({
ignore: []
});
$('#test').validate({
errorElement: 'span',
errorClass: 'error',
rules: {
singleselect:'required',
multipleselect:'required',
name:'required'
},
highlight: function (element, errorClass, validClass) {
var elem = $(element);
elem.addClass(errorClass);
},
unhighlight: function …Run Code Online (Sandbox Code Playgroud) 我是画布新手。我有一个水滴画布形状,想要将其填充为动画。
超文本标记语言
<canvas id="canvas" width="500" height="500"></canvas>
Run Code Online (Sandbox Code Playgroud)
JS
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.beginPath();
context.moveTo(109,15);
context.bezierCurveTo(121,36,133,57,144,78);
context.bezierCurveTo(160,109,176,141,188,175);
context.bezierCurveTo(206,226,174,272,133,284);
context.bezierCurveTo(79,300,24,259,25,202);
context.bezierCurveTo(25,188,30,174,35,161);
context.bezierCurveTo(53,115,76,73,100,31);
context.bezierCurveTo(103,26,106,21,109,15);
context.lineWidth = 10;
context.strokeStyle="#0092f9";
context.stroke();
context.fillStyle="rgb(43,146,255)";
context.beginPath();
context.moveTo(181,229);
context.bezierCurveTo(179,232,178,235,176,238);
context.bezierCurveTo(171,247,165,254,158,260);
context.bezierCurveTo(150,266,141,269,132,272);
context.bezierCurveTo(126,274,119,275,112,275);
context.bezierCurveTo(108,276,104,275,100,275);
context.bezierCurveTo(92,274,84,272,76,269);
context.bezierCurveTo(67,265,60,259,53,251);
context.bezierCurveTo(48,245,43,238,39,231);
context.bezierCurveTo(39,230,38,230,39,229);
context.bezierCurveTo(39,228,40,229,40,229);
context.bezierCurveTo(52,230,63,231,75,230);
context.bezierCurveTo(79,229,84,228,89,228);
context.bezierCurveTo(97,227,104,227,112,229);
context.bezierCurveTo(116,230,120,230,124,230);
context.bezierCurveTo(130,231,137,231,143,231);
context.bezierCurveTo(148,231,153,230,158,230);
context.bezierCurveTo(165,229,173,228,181,229);
context.fill();
Run Code Online (Sandbox Code Playgroud)
水滴形状起始点为;

并将终点形状为;

我想用动画填充它,像 jquery animate 函数一样慢慢增加液体。我怎样才能做到这一点?
HTML
<div class="wrapper">
<div class="parent">
<div class="child">
lorem ipsum
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
.wrapper {
width: 300px;
height: 300px;
margin: 30px auto;
border: 1px dashed #ccc;
overflow:hidden;
}
.parent {
width: 1px;
height: 100px;
background-color: #f00;
opacity: 0;
margin: 0 auto;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.wrapper:hover .parent {
opacity: 1;
-webkit-transform: scaleX(300);
transform: scaleX(300);
}
.wrapper . parent .child {
-webkit-transform: none;
transform: none;
}
Run Code Online (Sandbox Code Playgroud)
我想在悬停.wrapper div时只缩放.parent元素.但它也会影响两个div(父级和子级),尽管为.child div提供transform:none属性.如何防止.child受到影响?
我想在包装器div下找到并选择所有具有数据属性以"data-qu"开头的元素.如何使用jquery执行此操作?
HTML
<div class="wrapper">
<div data-qu-lw="1"></div>
<div data-qu-md="2"></div>
<div data-res-kl="1"></div>
<div data-qu-lg="3"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
有没有办法选择那些,像这样$('.wrapper').find('^data-qu')或类似?
html javascript jquery jquery-selectors custom-data-attribute
如何使用字符串插值动态添加 html 元素而不添加任何 html 标签?经验:
这是我组件中的 obj
myObj = {
title: 'Header Title',
icon: '<i class="fa fa-user">'
}
Run Code Online (Sandbox Code Playgroud)
我想添加这样的;
<header>
{{myObj.title}} - {{myObj.icon}}
</header>
Run Code Online (Sandbox Code Playgroud)
{{myObj.icon}} 呈现为文本,但我想呈现为 html。怎么能?
我希望结果如下
<header>
Header Title <i class ="fa fa-user"></i>
</header>
Run Code Online (Sandbox Code Playgroud)
如果我像这样改变我的 obj ;
myObj = {
title: 'Header Title',
icon: '<mat-icon>search</mat-icon>'
}
Run Code Online (Sandbox Code Playgroud)
呈现为
<header>
Header Title <mat-icon>search</mat-icon>
</header>
Run Code Online (Sandbox Code Playgroud) 我想选择动态创建的特定 html 元素。但是创建 html 块的“list”变量充满了 http 请求,并且 dom 没有立即加载。我想通过从 url 获取且等于列表项 id 的 id 选择元素。因此,即使我选择 ngAfterViewInit 挂钩中的元素,所选元素也是未定义的。我该如何选择?
超文本标记语言
<div id="wrapper">
<ng-container *ngFor="let item of list">
<div [id]="item.id">{{item.content}}</div>
</ng-container>
</div>
Run Code Online (Sandbox Code Playgroud)
TS
list = null;
selectedItemId = null;
ngOnInit() {
this.selectedItemId = this.activatedRoute.snapshot.params.id;
}
getList() {
this.http.get('http://api.example.com').subscribe(
result => this.list = result
)
}
ngAfterViewInit() {
const htmlElement= document.getElementById(this.selectedItemId);
/* Some codes that using htmlElement variable */
}
Run Code Online (Sandbox Code Playgroud)