如果将鼠标悬停在文本上，则将文本更改为其他内容答案

【问题标题】：If hovering over text change text to something else如果将鼠标悬停在文本上，则将文本更改为其他内容
【发布时间】：2017-08-17 16:44:30
【问题描述】：

我正在尝试制作一个表格，如果您将鼠标悬停在部分数据上，它会将数据值更改为其他值。如果您将鼠标移开，它将恢复原状。

问题是，如果它有多个具有正确数据的条目，它将更改每个设置了 ID/类名称的条目，但我希望它仅适用于已悬停的条目。我尝试使用$(this) 进行操作，但没有成功。

$(document).ready(function() {
$('.wep-data').on({
    mouseenter: function() {
    		document.getElementById("1").style.display = "none";
        document.getElementById("3").style.display = "none";
        document.getElementById("2").colSpan = "3";
        $('.wep-data').html('9999k');
        $('.wep-data').first().html('');
        $('.wep-data').last().html('');
        $('.wep-data').css('border-right', '2px solid #ccc');
        $('.wep-data').css('border-left', '2px solid #ccc');
    },
    mouseleave: function() {
    	  document.getElementById("1").style.display = "table-cell";
        document.getElementById("3").style.display = "table-cell";
        document.getElementById("2").colSpan = "1";
        $('.wep-data').html('0');
        $('.wep-data').first().html('0');
        $('.wep-data').last().html('0');
        $('.wep-data').css('border-right', '2px solid #ccc');
        $('.wep-data').css('border-left', '2px solid #ccc');
    }
});
});

.weapon-type-selection{
	text-shadow: 1px 1px 1px #881812, 1px -1px 1px #881812, -1px 1px 1px #881812, -1px -1px 1px #881812;
	cursor: pointer;
	color: white;
	font-size: 18px;
	margin-top: 14px;
    margin-bottom: 10px;
}
table, th, td {
    margin: 5px;
    font-size: 18px;
}

th{
	border-bottom: 2px solid #ccc;
	border-right: 2px solid #ccc;
}

td{
	border-bottom: 2px solid #ccc;
	border-right: 2px solid #ccc;
    border-left: 2px solid #ccc;
}
.weapons{
	height: 670px;
}
.wep-name{
	width: 295px;
}
.wep-data{
    width: 40px;
    text-align: center;
    padding: 5px;
}
.wep-cond{
	text-align: center;
}
.weapon-list{
	margin: 10px;
	color: #2b2825;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="borderBox weapons">
			<div class="weapon-list">
				<table>
					<tr>
						<th>Name</th>
						<th colspan="3" class="wep-cond">Brand New</th>
						<th colspan="3" class="wep-cond">New</th>
						<th colspan="3" class="wep-cond">Poor</th>
						<th colspan="3" class="wep-cond">Low-Quality</th>
						<th colspan="3" class="wep-cond">Rotten</th>
					</tr>
					<tr>
						<td class="wep-name">Sword</td>
						<td id="1" class="wep-data">0</td>
						<td id="2" class="wep-data">0</td>
						<td id="3" class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
					</tr>
					<tr>
						<td class="wep-name">Bow</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
					</tr>
					<tr>
						<td class="wep-name">Knife</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
					</tr>
				</table>
			</div>
		</div>
	</div>

【问题讨论】：

您的问题不清楚，悬停时的预期结果是什么？
@Dij 预期的结果是更改为 JS 中使用的 HTML。

标签： javascript jquery hover

【解决方案1】：

试试这个：

$(document).ready(function() {
  var getElementBlock = function(el) {
    var $el = $(el),
        $allTds = $el.parent().find("td:not(:first)"),
        index = $el.index();
        c1 = (index - 1),
        c2 = Math.floor(c1 / 3) * 3,
        $els = $allTds.slice(c2, (c2 + 3));
        
     return $els;
  };
  
$('.wep-data').on({
    mouseenter: function() {
        var $els = getElementBlock(this);        
        $els.filter(":not(:eq(0))").hide();
        $els.filter(":eq(0)").attr("colspan", 3);
        
        $('.wep-data-fn').html('9999k');
        $('.wep-data-fn').first().html('');
        $('.wep-data-fn').last().html('');
        $('.wep-data-fn').css('border-right', '2px solid #ccc');
        $('.wep-data-fn').css('border-left', '2px solid #ccc');
    },
    mouseleave: function() {
        var $els = getElementBlock(this);        
        $els.filter(":not(:eq(0))").show();
        $els.filter(":eq(0)").removeAttr("colspan");
        
        $('.wep-data-fn').html('0');
        $('.wep-data-fn').first().html('0');
        $('.wep-data-fn').last().html('0');
        $('.wep-data-fn').css('border-right', '2px solid #ccc');
        $('.wep-data-fn').css('border-left', '2px solid #ccc');
    }
});
});

.weapon-type-selection{
	text-shadow: 1px 1px 1px #881812, 1px -1px 1px #881812, -1px 1px 1px #881812, -1px -1px 1px #881812;
	cursor: pointer;
	color: white;
	font-size: 18px;
	margin-top: 14px;
    margin-bottom: 10px;
}
table, th, td {
    margin: 5px;
    font-size: 18px;
}

th{
	border-bottom: 2px solid #ccc;
	border-right: 2px solid #ccc;
}

td{
	border-bottom: 2px solid #ccc;
	border-right: 2px solid #ccc;
    border-left: 2px solid #ccc;
}
.weapons{
	height: 670px;
}
.wep-name{
	width: 295px;
}
.wep-data{
    width: 40px;
    text-align: center;
    padding: 5px;
}
.wep-cond{
	text-align: center;
}
.weapon-list{
	margin: 10px;
	color: #2b2825;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="borderBox weapons">
			<div class="weapon-list">
				<table>
					<tr>
						<th>Name</th>
						<th colspan="3" class="wep-cond">Brand New</th>
						<th colspan="3" class="wep-cond">New</th>
						<th colspan="3" class="wep-cond">Poor</th>
						<th colspan="3" class="wep-cond">Low-Quality</th>
						<th colspan="3" class="wep-cond">Rotten</th>
					</tr>
					<tr>
						<td class="wep-name">Sword</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
					</tr>
					<tr>
						<td class="wep-name">Bow</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
					</tr>
					<tr>
						<td class="wep-name">Knife</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
					</tr>
				</table>
			</div>
		</div>
	</div>

【讨论】：

您的解决方案似乎是正确的，谢谢！只有一个问题是，由于某种原因，如果我将鼠标悬停在盒子上，一张桌子会不断移动/闪烁，但其他桌子似乎可以工作。
谢谢，找到了解决办法。如果表有 1 条记录，它将开始闪烁。我接受了你的回答。
@LewisLarf 谢谢你，我很乐意提供帮助。
不，谢谢。你帮了我很多忙。我可能永远也想不通
@LewisLarf 都是关于数学的，而且很简单。有时你不可能对所有事情都有一个方法或函数。干杯！

【解决方案2】：

您可以在此处使用this 并将之前的值存储在一个全局变量中，该变量可用于恢复mouseleave 上的原始值，如下所示：

$(document).ready(function() {
var prevValue;
$('.wep-data').on({
    mouseenter: function() {
        prevValue = $(this).html();
        $(this).html('9999k');
        //$(this).attr('colSpan', 3);
        $(this).css('border-right', '2px solid #ccc');
        $(this).css('border-left', '2px solid #ccc');
    },
    mouseleave: function() {
        $(this).html(prevValue);
        //$(this).attr('colSpan', 1);
        $(this).css('border-right', '2px solid #ccc');
        $(this).css('border-left', '2px solid #ccc');
    }
});
});

.weapon-type-selection{
	text-shadow: 1px 1px 1px #881812, 1px -1px 1px #881812, -1px 1px 1px #881812, -1px -1px 1px #881812;
	cursor: pointer;
	color: white;
	font-size: 18px;
	margin-top: 14px;
    margin-bottom: 10px;
}
table, th, td {
    margin: 5px;
    font-size: 18px;
}

th{
	border-bottom: 2px solid #ccc;
	border-right: 2px solid #ccc;
}

td{
	border-bottom: 2px solid #ccc;
	border-right: 2px solid #ccc;
    border-left: 2px solid #ccc;
}
.weapons{
	height: 670px;
}
.wep-name{
	width: 295px;
}
.wep-data{
    width: 40px;
    text-align: center;
    padding: 5px;
}
.wep-cond{
	text-align: center;
}
.weapon-list{
	margin: 10px;
	color: #2b2825;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="borderBox weapons">
			<div class="weapon-list">
				<table>
					<tr>
						<th>Name</th>
						<th colspan="3" class="wep-cond">Brand New</th>
						<th colspan="3" class="wep-cond">New</th>
						<th colspan="3" class="wep-cond">Poor</th>
						<th colspan="3" class="wep-cond">Low-Quality</th>
						<th colspan="3" class="wep-cond">Rotten</th>
					</tr>
					<tr>
						<td class="wep-name">Sword</td>
						<td id="1" class="wep-data">0</td>
						<td id="2" class="wep-data">0</td>
						<td id="3" class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
					</tr>
					<tr>
						<td class="wep-name">Bow</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
					</tr>
					<tr>
						<td class="wep-name">Knife</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
						<td class="wep-data">0</td>
					</tr>
				</table>
			</div>
		</div>
	</div>

【讨论】：

几乎是正确的，但我想要的是它将 colspan 设置为 1，因此它将是 1，然后更改该数字。稍后将其还原。
谢谢，它几乎可以正常工作，但如果您将最后一个数字悬停在 Brand Nex 下，那么它会从新设置数字。
它并没有真正改变“新建”下的值 - 列（实际上是单元格）只是扩展以适应值。如果整个列展开以显示单元格和数据仍在“全新”类别下，这似乎是理想的选择？
@KenH。我不能以某种方式使用索引来做到这一点吗？通过$(this) 然后在每列下有三个索引（1,2,3）并且使用它我不能以某种方式设置 CSS 并添加 attr 吗？

【解决方案3】：

将事件对象传递给您的函数。您可以使用 e.target 来确定激活了哪个元素。

mouseenter: function(e) {
  e.target.style.display = 'none';
}

【讨论】：

是的，但我需要为该列下的 3 个元素执行此操作。因此，在“差”下，这 3 个必须像我的示例一样获取/更改一些值。
那里我使用那个 1,2,3 解决方案进行测试，但对于真实的东西我不能使用它。

【解决方案4】：

你的问题在于这个......

 $('.wep-data').html('9999k');

由于您正在调用一个类，它将应用于您的 html 中具有该名称的所有类。

https://jsfiddle.net/srg0uzqs/

改成..

 $(this).html('9999k');

【讨论】：