css질문
본문
안녕요 <span class="hid"><font color="Red">바</font>이루</span>
<style>
.hid{margin:0 !important;padding:1px 0 !important;color:#e9e9e9 !important ;background-color:#e9e9e9 !important; cursor:pointer !important;-
ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;position:relative;z-index:999}
</style>
<script>
$(function(){
$(".hid").click(function(){
$(this).removeClass("hid");
});
});
</script>
이런식으로 되어있는 소스 코드가 있습니다.
위 코드를 보면 아래 이미지처럼 나옵니다.
회색부분을 겉어내면
이렇게 나오는데요...
font-color red를 회색을 누르면 적용되어잇게 하고 싶은데...
어떻게 해야되나요??
퀴즈 관련 용도로 쓰려고하는데..
답변 2
일단 font-color 태그는 이제 사용하지 않으니 <a> 태그로 잡으시고요<a class="클래스1" >바</a><span class="클래스2">이루 </span> 이런 식으로 잡으셔서 클래스 1을 클릭했을 때 클래스2 hidden 된 클래스가 사라지게 하시면 될것같아요
잘 될지 잘 모르겠습니다만, 조금 쉽게 고쳐본 소스입니다.
혹 잘 된다면 응용하시면 될 것 같습니다.
ex.
<span>안녕요<span class="s_red">바</span><span class="s_bg_gray">이루</span></span>
<style>
.s_red {color: red}
.s_bg_gray {background: #e9e9e9; color: #e9e9e9; cursor:pointer}
.s_bg_gray.on {background: transparent; color: #333; cursor:pointer}
</style>
<script>
$(function() {
$('.s_bg_gray').on('click', function() {
$(this).toggleClass('on');
//$(this).css({'background' : 'transparent', 'color' : '#333'});
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
