如何根据“X”右（悬停）动态增加“背景位置”内容？答案

【问题标题】：How to increase the "background position" content dynamically depending on "X" right (hover)?如何根据“X”右（悬停）动态增加“背景位置”内容？
【发布时间】：2014-06-10 03:40:24
【问题描述】：

我需要根据内容自动增加“背景位置”铅笔，这总是正确的（悬停）。

<!-- 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

【问题讨论】：

我不明白，你到底想用铅笔做什么？它需要去哪里？（顺便说一句，如果你问背景位置是否好，你可以回答“否”，那么你真的不需要第二个问题吗？）
我只需要不要安装笔，笔总是像第一种情况一样在右边

标签： javascript jquery html css json

【解决方案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.

【讨论】：

【解决方案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，以便方框很好地环绕其内容，否则“铅笔”将显示在问题右侧的远处。另外，将右边的内边距增加到比铅笔稍微宽一点...

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

这是JS Fiddler Example

【讨论】：

@JoséMaríaBarrientos 这个答案真的很好，你应该接受它。我的想法是你不能改变h2 的display:block。如果使用display:inline-block 没问题，这将是您需要的解决方案。在这种情况下，display:inline-block 和 block 的用法仅在您想在 h2 元素周围应用一些边框时有所不同，...
应该没有任何区别，特别是因为 h2 没有兄弟姐妹并且它位于块元素内。如果他想将样式应用于“问题”，他可以设置 h2 或父 div... 的样式，具体取决于所讨论的样式