小编mid*_*ack的帖子

如何使用jQuery在mouseover上找到当前元素?

如何获取鼠标悬停时当前元素的类名?例如 在此输入图像描述

当鼠标从div到a时,我想获得div元素的类名.我如何使用jQuery获取它?

html javascript jquery mouseover mouseout

22
推荐指数
3
解决办法
8万
查看次数

IE9/8/7 css精灵位置滑动问题

我想要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">&nbsp;</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

16
推荐指数
1
解决办法
6646
查看次数

如何使用jquery创建一个简单的mouseon弹出工具提示?

我想显示列出信息的相关工具提示,相关工具提示和信息在表格中的相同单元格中.我不想为此使用插件.当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 javascript jquery tooltip jquery-ui-tooltip

7
推荐指数
1
解决办法
3万
查看次数

我可以创建没有对角线的边框底部吗?

我想创建一个不同颜色的盒子,左,右和顶部颜色为红色,底部颜色为灰色但我想要平底盒边框

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)

当我使用上面的代码创建它时,它看起来像这样

在此输入图像描述

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

在此输入图像描述

http://jsfiddle.net/3jHG8/

有没有一种简单的方法可以像crossbrowser那样做?

html css border flat css3

7
推荐指数
1
解决办法
3907
查看次数

如何使用jquery验证插件验证select2元素?

我使用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)

forms jquery jquery-validate jquery-select2

7
推荐指数
1
解决办法
2万
查看次数

如何用动画填充画布形状?

我是画布新手。我有一个水滴画布形状,想要将其填充为动画。

超文本标记语言

 <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 函数一样慢慢增加液体。我怎样才能做到这一点?

Code example

html javascript jquery animation canvas

5
推荐指数
1
解决办法
2979
查看次数

如何在css3中防止受影响的孩子变换规模?

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受到影响?

http://jsfiddle.net/cdmkoao4/1/

html css transform css3 css-transforms

4
推荐指数
1
解决办法
2474
查看次数

如何使用jquery查找并选择具有以特定单词开头的数据属性的所有元素?

我想在包装器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

4
推荐指数
1
解决办法
249
查看次数

如何在角度中添加带有字符串插值的 html 元素?

如何使用字符串插值动态添加 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 dynamic string-interpolation angular angular6

4
推荐指数
1
解决办法
6483
查看次数

如何选择在 Angular 中动态加载的 html 元素?

我想选择动态创建的特定 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)

html javascript hook getelementbyid angular

4
推荐指数
1
解决办法
4727
查看次数