javascript - 单击时保持元素的悬停样式处于事件状态

coder 2023-08-11 原文

我正在制作一个选择面板，但我很难找出它的一个方面。有九个框，我希望用户能够单击这些框，并在单击时使悬停格式保持存在，然后理想情况下在框的边框中添加某种复选标记或其他内容。我完全不确定如何在我离开鼠标时让框的悬停字体效果保持不变。

有人知道我该怎么做吗？

#project-scope-container {
	margin-top: 70px;
	margin-left: 9%;
	width: 75%;
	height: 300px;
}
#project-scope-title {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 15px;
}
.project-option-boxes {
	display: inline-block;
	border: 1px solid #45ba95;
	padding: 20px 0px;
	margin: 12px 20px 12px 0px;
	width: 30%;
	text-align: center;
	font-size: 1.2em;
	color: #45ba95;
	cursor: pointer;
}
.project-option-boxes:hover {
	background-color: #45ba95;
	color: #FFF;
}

<div id="project-scope-container">
		<div id="project-scope-title">PROJECT SCOPE</div>
		<div class="project-option-boxes">BRANDING & IDENTITY</div>
		<div class="project-option-boxes">WEB DESIGN</div>
		<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
		<div class="project-option-boxes">MARKETING ASSETS</div>
		<div class="project-option-boxes">HTML5 ANIMATION</div>
		<div class="project-option-boxes">SEO OPTIMIZATION</div>
		<div class="project-option-boxes">MONTHLY SUPPORT</div>
		<div class="project-option-boxes">WEB DEVELOPMENT</div>
		<div class="project-option-boxes">ECOMMERCE</div>
	</div>

最佳答案

创建另一个在悬停时保持相同 css 样式的类名，并将这些类添加到单击的元素中或使用 toggleClass 如下例:

$('.project-option-boxes').click(function() {
  $(this).hide().toggleClass('box_focused').fadeIn('slow');
});

#project-scope-container {
  margin-top: 70px;
  margin-left: 9%;
  width: 75%;
  height: 300px;
}
#project-scope-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
}
.project-option-boxes {
  display: inline-block;
  border: 1px solid #45ba95;
  padding: 20px 0px;
  margin: 12px 20px 12px 0px;
  width: 30%;
  text-align: center;
  font-size: 1.2em;
  color: #45ba95;
  cursor: pointer;
}
.project-option-boxes:hover {
  background-color: #45ba95;
  color: #FFF;
}
.box_focused {
  background-color: #45ba95;
  background-image : url("http://findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png");
  background-position: right top;
  background-repeat: no-repeat;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="project-scope-container">
  <div id="project-scope-title">PROJECT SCOPE</div>
  <div class="project-option-boxes">BRANDING & IDENTITY</div>
  <div class="project-option-boxes">WEB DESIGN</div>
  <div class="project-option-boxes">RESPONSIVE/MOBILE</div>
  <div class="project-option-boxes">MARKETING ASSETS</div>
  <div class="project-option-boxes">HTML5 ANIMATION</div>
  <div class="project-option-boxes">SEO OPTIMIZATION</div>
  <div class="project-option-boxes">MONTHLY SUPPORT</div>
  <div class="project-option-boxes">WEB DEVELOPMENT</div>
  <div class="project-option-boxes">ECOMMERCE</div>
</div>

关于javascript - 单击时保持元素的悬停样式处于事件状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34813533/

javascript 处于 project-option-boxes project div jquery html css

有关javascript - 单击时保持元素的悬停样式处于事件状态的更多相关文章

ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
ruby-on-rails - 跳过状态机方法的所有验证 - 2
当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested
ruby - 字符串文字中的转义状态作为 `String#tr` 的参数 - 2
对于作为String#tr参数的单引号字符串文字中反斜杠的转义状态，我觉得有些神秘。你能解释一下下面三个例子之间的对比吗？我特别不明白第二个。为了避免复杂化，我在这里使用了'd'，在双引号中转义时不会改变含义("\d"="d")。'\\'.tr('\\','x')#=>"x"'\\'.tr('\\d','x')#=>"\\"'\\'.tr('\\\d','x')#=>"x" 最佳答案在tr中转义tr的第一个参数非常类似于正则表达式中的括号字符分组。您可以在表达式的开头使用^来否定匹配(替换任何不匹配的内容)并使用例如a-f来匹配一
ruby - Net::HTTP 获取源代码和状态 - 2
我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。最佳答案在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
ruby - 在哈希的键数组中追加元素 - 2
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？最佳答案如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用
ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？最佳答案您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

javascript - 单击时保持元素的悬停样式处于事件状态

有关javascript - 单击时保持元素的悬停样式处于事件状态的更多相关文章

随机推荐