Question

我需要自动增加＆＃34;背景位置＆＃34;铅笔根据内容而且总是正确的（悬停）。

<!-- INICIO estilos pregunta -->
<div class="preguntayrespuesta"> 
    <div class="pregunta">  
        <h2 style="background-position: 370.796875px 5px;">1. The "background position" of this pencil looks good ... =)</h2>
    </div>
    <a class="delete" ></a>
    <div class="respuesta">
        <input type="radio" name="1" value="S"> Yes <br />
        <input type="radio" name="1" value="N"> No <br />
    </div> 
</div>
<!-- FIN estilos pregunta -->

JSFIDDLE DEMO HERE

Answer 1

这是一个脚本解决方案。想法是创建一些虚拟元素来测量h2元素的文本宽度，然后使用该宽度（带有一些偏移量）来相应地设置背景位置：

var dummy = $('<span>').css({display:'inline-block'}).appendTo('body');                  
$('h2').each(function(i,e){
  dummy.css('font', $(e).css('font'))
     .css('max-width', $(e).width())
     .css('padding', $(e).css('padding'))
     .css('box-sizing', $(e).css('box-sizing'))
     .html($(e).html());    
  $(e).css('background-position', 'right ' + ($(e).width() - dummy.width()) + 'px top 0px');
});
dummy.remove();

Demo.

Answer 2

Hola Amigo :)你应该首先将背景对齐（水平）......

.preguntayrespuesta h2:hover {
    background-position: right center;
}

删除您为h2指定的难看的内嵌样式，您不需要它们。

<div class="pregunta">  
    <h2>1. The "background position" of this pencil looks good ... =)</h2>

最后，让你的问题显示inline-block，以便盒子很好地包裹其内容，否则＆＃34;铅笔＆＃34;将显示在问题的右侧。另外，增加右边距比铅笔更宽......

.preguntayrespuesta h2{
    padding-right: 32px;
    display:inline-block;
}

这里是JS Fiddler Example

如何增加背景位置＆＃34;内容动态取决于＆＃34; X＆＃34;对（悬停）？

2 个答案:

Demo.